/* ============================================================
   OWNARA AI — Design Tokens & Font System
   Brand system is binding: palette, Sora typeface, complete
   circular ring mark. Calm, disciplined, editorial.
   ============================================================ */

/* ---- Sora (self-hosted, SIL OFL) ---- */
@font-face { font-family: "Sora"; src: url("../fonts/Sora-Thin.ttf") format("truetype");       font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Sora"; src: url("../fonts/Sora-ExtraLight.ttf") format("truetype"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Sora"; src: url("../fonts/Sora-Light.ttf") format("truetype");      font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Sora"; src: url("../fonts/Sora-Regular.ttf") format("truetype");    font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Sora"; src: url("../fonts/Sora-Medium.ttf") format("truetype");     font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Sora"; src: url("../fonts/Sora-SemiBold.ttf") format("truetype");   font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Sora"; src: url("../fonts/Sora-Bold.ttf") format("truetype");       font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ---- Brand palette (Farbcodes.jpg — binding) ---- */
  --teal:      #123C40;
  --linen:     #F5F1E8;
  --cinnamon:  #C67C5C;
  --steel:     #8FA9AD;
  --carbon:    #242827;

  /* ---- Derived tones (within the brand world) ---- */
  --linen-hi:   #FBF9F4;
  --linen-deep: #EDE7DA;
  --linen-edge: #E0D8C8;
  --teal-deep:  #0D2E31;
  --teal-abyss: #0A2427;
  --mint:       #B7CBC9;
  --cinnamon-soft: #D89C81;
  --cinnamon-deep: #A5613F;

  /* ---- Semantic roles ---- */
  --bg:        var(--linen);
  --ink:       var(--carbon);
  --ink-soft:  rgba(36, 40, 39, 0.70);
  --ink-faint: rgba(36, 40, 39, 0.46);
  --accent:    var(--cinnamon);
  --heading:   var(--teal);

  --on-dark:       #EFE9DC;
  --on-dark-soft:  rgba(239, 233, 220, 0.72);
  --on-dark-faint: rgba(239, 233, 220, 0.40);

  /* ---- Type ---- */
  --font: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Calm, disciplined fluid scale (px targets in comments) */
  --t-label: clamp(0.75rem, 0.72rem + 0.12vw, 0.82rem);  /* 12–13  */
  --t-body:  clamp(1.0625rem, 1rem + 0.28vw, 1.25rem);   /* 17–20  */
  --t-body-l:clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);   /* 18–22  */
  --t-h3:    clamp(1.5rem, 1.28rem + 1.05vw, 2.3rem);    /* 24–37  */
  --t-h2:    clamp(2.15rem, 1.75rem + 2vw, 3.5rem);      /* 34–56  */
  --t-h1:    clamp(2.9rem, 2.3rem + 3vw, 4.6rem);        /* 46–74  */
  --t-statement: clamp(2.4rem, 1.9rem + 2.6vw, 4rem);    /* 38–64, used sparingly */

  /* ---- Spacing rhythm ---- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --section-y: clamp(4.5rem, 3.5rem + 4.5vw, 8.5rem);

  /* ---- Container discipline (one system-wide shell) ---- */
  --gutter: clamp(1.5rem, 1rem + 3vw, 4.5rem);           /* 24–72 */
  --shell:  min(100% - (var(--gutter) * 2), 1320px);
  --measure: 66ch;

  --nav-h: 76px;

  --radius:   12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft:  cubic-bezier(0.33, 0, 0.2, 1);
  --dur-1: 0.4s;
  --dur-2: 0.7s;
  --dur-3: 1.1s;

  /* ---- Elevation ---- */
  --shadow-soft: 0 1px 2px rgba(18,60,64,0.04), 0 10px 34px rgba(18,60,64,0.07);
  --shadow-lift: 0 2px 8px rgba(18,60,64,0.06), 0 28px 64px rgba(18,60,64,0.12);
}