/* ==========================================================================
   SAROUVET TECHNOLOGIES — DESIGN TOKENS
   Brand palette (exact): White / Fog / Smoke / Iron / Midnight / Black
   The brand is strictly monochrome. The ONLY colour in the system is the
   syntax palette, scoped to code surfaces — the way an editor theme is.
   ========================================================================== */

:root {
  /* ---- Brand primitives (never used directly for UI — map them below) ---- */
  --brand-white:    #FFFFFF;  /* Pantone White        */
  --brand-fog:      #CCCCCC;  /* Pantone Cool Gray 1C */
  --brand-smoke:    #7D7D7D;  /* Pantone Cool Gray 8C */
  --brand-iron:     #4D4D4D;  /* Pantone Cool Gray 10C*/
  --brand-midnight: #262626;  /* Pantone 426 C        */
  --brand-black:    #1A1A1A;  /* Pantone 419 C        */

  /* ---- Type families ---- */
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    Consolas, "Liberation Mono", monospace;

  /* ---- Fluid type scale (min 360px → max 1600px) ---- */
  --fs-mega:       clamp(3.25rem, 0.35rem + 12.9vw, 13rem);
  /* Capped so the longest single word ("Technology") still fits the hero's
     narrower two-column measure without overflowing. */
  --fs-display-xl: clamp(2.85rem, 1.40rem + 6.2vw, 6.5rem);
  --fs-display-l:  clamp(2.5rem, 1.40rem + 4.9vw, 5.75rem);
  --fs-display-m:  clamp(2rem, 1.35rem + 2.9vw, 4rem);
  --fs-h1:         clamp(2.15rem, 1.50rem + 2.9vw, 4.25rem);
  --fs-h2:         clamp(1.75rem, 1.32rem + 1.9vw, 3.1rem);
  --fs-h3:         clamp(1.3rem, 1.13rem + 0.76vw, 1.85rem);
  --fs-h4:         clamp(1.0625rem, 0.99rem + 0.33vw, 1.3rem);
  --fs-lead:       clamp(1.09rem, 0.99rem + 0.44vw, 1.4rem);
  --fs-body:       clamp(0.95rem, 0.92rem + 0.15vw, 1.06rem);
  --fs-sm:         0.885rem;
  --fs-xs:         0.8125rem;
  --fs-micro:      0.6875rem;

  --lh-tight: 0.98;
  --lh-snug: 1.10;
  --lh-heading: 1.20;
  --lh-body: 1.68;
  --lh-loose: 1.82;

  --tracking-display: -0.035em;
  --tracking-tight: -0.019em;
  --tracking-normal: -0.006em;
  --tracking-label: 0.16em;
  --tracking-eyebrow: 0.24em;

  /* ---- Spacing (8pt base) ---- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 2.75rem;  --sp-8: 3.5rem;
  --sp-9: 4.75rem;  --sp-10: 6rem;    --sp-11: 7.5rem;  --sp-12: 9.5rem;
  --sp-13: 12rem;

  /* Generous vertical rhythm — the site should breathe, not cram */
  --section-y: clamp(5.5rem, 3.2rem + 9.5vw, 13rem);
  --section-y-lg: clamp(7rem, 4rem + 12vw, 17rem);
  --gutter: clamp(1.25rem, 0.5rem + 3.1vw, 3.75rem);
  --maxw: 1360px;
  --maxw-wide: 1560px;
  --maxw-prose: 68ch;
  --maxw-narrow: 940px;

  /* ---- Radii ---- */
  --r-xs: 4px;  --r-sm: 9px;  --r-md: 14px;
  --r-lg: 22px; --r-xl: 32px; --r-2xl: 44px; --r-pill: 999px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.46, 0.44, 1);
  --ease-soft: cubic-bezier(0.33, 0.9, 0.28, 1);
  --dur-fast: 180ms;
  --dur: 380ms;
  --dur-slow: 720ms;
  --dur-xslow: 1250ms;

  --z-shapes: 0;
  --z-canvas: 1;
  --z-content: 2;
  --z-header: 800;
  --z-menu: 900;
  --z-cursor: 1000;
  --z-loader: 1100;
}

/* ==========================================================================
   THEME: DARK (default)
   ========================================================================== */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            var(--brand-black);
  --bg-sunk:       #141414;
  --bg-elev:       var(--brand-midnight);
  --bg-elev-2:     #303030;
  --bg-inverse:    var(--brand-white);

  --text:          var(--brand-white);
  --text-2:        var(--brand-fog);
  --text-3:        var(--brand-smoke);
  --text-inverse:  var(--brand-black);

  --line:          rgba(255, 255, 255, 0.10);
  --line-2:        rgba(255, 255, 255, 0.16);
  --line-strong:   rgba(255, 255, 255, 0.28);

  --surface-glass: rgba(26, 26, 26, 0.70);
  --surface-hover: rgba(255, 255, 255, 0.045);
  --surface-active:rgba(255, 255, 255, 0.085);

  --grid-dot:      rgba(255, 255, 255, 0.16);
  --grid-dot-hot:  rgba(255, 255, 255, 0.85);
  --scrim:         rgba(26, 26, 26, 0.88);

  /* Nature-shape layer — sits behind content, never competes with it */
  --shape-line:    rgba(255, 255, 255, 0.075);
  --shape-line-2:  rgba(255, 255, 255, 0.13);
  --shape-fill:    rgba(255, 255, 255, 0.028);
  --shape-fill-2:  rgba(255, 255, 255, 0.055);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 14px 40px -14px rgba(0, 0, 0, 0.8);
  --shadow-lg: 0 40px 90px -32px rgba(0, 0, 0, 0.92);
  --glow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 24px 60px -24px rgba(0, 0, 0, 0.9);

  --sheen: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.055) 0%,
    rgba(255, 255, 255, 0.012) 42%,
    rgba(255, 255, 255, 0) 100%
  );

  /* ---------- SYNTAX PALETTE — code surfaces only ---------- */
  --code-bg:      #1E1E20;
  --code-gutter:  rgba(255, 255, 255, 0.24);
  --code-key:     #B49CF7;  /* keywords, control flow   */
  --code-fn:      #7CC4F5;  /* functions, methods       */
  --code-str:     #9AD87F;  /* strings                  */
  --code-num:     #F2B15F;  /* numbers, constants       */
  --code-com:     #6E7681;  /* comments                 */
  --code-punc:    #8B949E;  /* punctuation, operators   */
  --code-var:     #DCE3EC;  /* identifiers              */
  --code-ok:      #4FD6A2;  /* success output           */
  --code-warn:    #F7768E;  /* alerts, criticals        */
}

/* ==========================================================================
   THEME: LIGHT
   ========================================================================== */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:            var(--brand-white);
  --bg-sunk:       #F4F4F4;
  --bg-elev:       #FAFAFA;
  --bg-elev-2:     #F0F0F0;
  --bg-inverse:    var(--brand-black);

  --text:          var(--brand-black);
  --text-2:        var(--brand-iron);
  --text-3:        var(--brand-smoke);
  --text-inverse:  var(--brand-white);

  --line:          rgba(26, 26, 26, 0.11);
  --line-2:        rgba(26, 26, 26, 0.17);
  --line-strong:   rgba(26, 26, 26, 0.30);

  --surface-glass: rgba(255, 255, 255, 0.74);
  --surface-hover: rgba(26, 26, 26, 0.038);
  --surface-active:rgba(26, 26, 26, 0.07);

  --grid-dot:      rgba(26, 26, 26, 0.16);
  --grid-dot-hot:  rgba(26, 26, 26, 0.72);
  --scrim:         rgba(255, 255, 255, 0.9);

  --shape-line:    rgba(26, 26, 26, 0.075);
  --shape-line-2:  rgba(26, 26, 26, 0.14);
  --shape-fill:    rgba(26, 26, 26, 0.026);
  --shape-fill-2:  rgba(26, 26, 26, 0.05);

  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.08);
  --shadow-md: 0 14px 40px -16px rgba(26, 26, 26, 0.22);
  --shadow-lg: 0 40px 90px -34px rgba(26, 26, 26, 0.30);
  --glow: 0 0 0 1px rgba(26, 26, 26, 0.10), 0 24px 60px -26px rgba(26, 26, 26, 0.25);

  --sheen: linear-gradient(
    180deg,
    rgba(26, 26, 26, 0.032) 0%,
    rgba(26, 26, 26, 0.008) 42%,
    rgba(26, 26, 26, 0) 100%
  );

  /* Code surfaces stay dark in light mode — an editor pane, not a document. */
  --code-bg:      #1E1E20;
  --code-gutter:  rgba(255, 255, 255, 0.24);
  --code-key:     #B49CF7;
  --code-fn:      #7CC4F5;
  --code-str:     #9AD87F;
  --code-num:     #F2B15F;
  --code-com:     #6E7681;
  --code-punc:    #8B949E;
  --code-var:     #DCE3EC;
  --code-ok:      #4FD6A2;
  --code-warn:    #F7768E;
}

/* Respect OS preference before the user makes an explicit choice */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg:            var(--brand-white);
    --bg-sunk:       #F4F4F4;
    --bg-elev:       #FAFAFA;
    --bg-elev-2:     #F0F0F0;
    --bg-inverse:    var(--brand-black);
    --text:          var(--brand-black);
    --text-2:        var(--brand-iron);
    --text-3:        var(--brand-smoke);
    --text-inverse:  var(--brand-white);
    --line:          rgba(26, 26, 26, 0.11);
    --line-2:        rgba(26, 26, 26, 0.17);
    --line-strong:   rgba(26, 26, 26, 0.30);
    --surface-glass: rgba(255, 255, 255, 0.74);
    --surface-hover: rgba(26, 26, 26, 0.038);
    --surface-active:rgba(26, 26, 26, 0.07);
    --grid-dot:      rgba(26, 26, 26, 0.16);
    --grid-dot-hot:  rgba(26, 26, 26, 0.72);
    --scrim:         rgba(255, 255, 255, 0.9);
    --shape-line:    rgba(26, 26, 26, 0.075);
    --shape-line-2:  rgba(26, 26, 26, 0.14);
    --shape-fill:    rgba(26, 26, 26, 0.026);
    --shape-fill-2:  rgba(26, 26, 26, 0.05);
    --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.08);
    --shadow-md: 0 14px 40px -16px rgba(26, 26, 26, 0.22);
    --shadow-lg: 0 40px 90px -34px rgba(26, 26, 26, 0.30);
    --glow: 0 0 0 1px rgba(26, 26, 26, 0.10), 0 24px 60px -26px rgba(26, 26, 26, 0.25);
    --sheen: linear-gradient(180deg, rgba(26,26,26,0.032) 0%, rgba(26,26,26,0.008) 42%, rgba(26,26,26,0) 100%);
  }
}