/* ─────────────────────────────────────────────────────────────
   AiS1.52 — Design Tokens (v2 — Editorial Ink)
   Single source of truth. No hardcoded values outside this file.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── COLORS — EDITORIAL INK ──────────────────────────── */
  /* Background: deep ink, slight cool cast (not pure black) */
  --bg:           #0B0E12;
  --bg-elev-1:    #11151B;
  --bg-elev-2:    #181D26;
  --bg-elev-3:    #20262F;

  /* Borders: warm bone at low alpha */
  --bd:           rgba(244, 239, 229, 0.08);
  --bd-strong:    rgba(244, 239, 229, 0.18);
  --bd-accent:    rgba(255, 106, 60, 0.34);

  /* Text: warm bone, never pure white */
  --tx:           #F4EFE5;
  --tx-mu:        rgba(244, 239, 229, 0.62);
  --tx-fa:        rgba(244, 239, 229, 0.36);
  --tx-on-ac:     #0B0E12;

  /* Primary accent: warm coral (replaces lime) — German Werkbund warm */
  --ac:           #FF6A3C;
  --ac-soft:      rgba(255, 106, 60, 0.10);
  --ac-glow:      rgba(255, 106, 60, 0.45);
  --ac-hover:     #FF8559;

  /* Secondary accent: cool sky blue — for inline links + code highlights */
  --link:         #7DC4FF;
  --link-soft:    rgba(125, 196, 255, 0.10);

  /* Status */
  --status-ok:    #6EE7B7;
  --status-warn:  #FCD34D;
  --status-err:   #FB7185;
  --status-dev:   #94A3B8;

  /* Code syntax (terminal panel) */
  --code-keyword: #FF6A3C;     /* coral — matches accent */
  --code-string:  #7DC4FF;     /* sky */
  --code-fn:      #F4EFE5;     /* bone */
  --code-num:     #FCD34D;     /* amber */
  --code-comment: rgba(244, 239, 229, 0.34);
  --code-punct:   rgba(244, 239, 229, 0.50);

  /* ── TYPOGRAPHY ──────────────────────────────────────── */
  /* Mona Sans = variable font (wght 200-900, wdth 75-125). */
  /* Falls back to Inter, then system. */
  --ff-sans:      'Mona Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --ff-mono:      'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Monaco, Consolas, monospace;
  --ff-display:   var(--ff-sans);

  /* Variable axes default values */
  --wght-light:   320;
  --wght-regular: 420;
  --wght-medium:  540;
  --wght-semibold:620;
  --wght-bold:    720;
  --wdth-narrow:  88;
  --wdth-normal:  100;
  --wdth-wide:    112;

  /* Fluid type scale */
  --fs-2xs:       clamp(0.6875rem, 0.65rem + 0.18vw, 0.75rem);
  --fs-xs:        clamp(0.75rem,   0.7rem  + 0.25vw, 0.8125rem);
  --fs-sm:        clamp(0.8125rem, 0.75rem + 0.30vw, 0.9375rem);
  --fs-base:      clamp(0.9375rem, 0.85rem + 0.45vw, 1.0625rem);
  --fs-lg:        clamp(1.0625rem, 0.95rem + 0.55vw, 1.25rem);
  --fs-xl:        clamp(1.25rem,   1.10rem + 0.75vw, 1.5rem);
  --fs-2xl:       clamp(1.5rem,    1.25rem + 1.25vw, 2rem);
  --fs-3xl:       clamp(2rem,      1.50rem + 2.50vw, 3rem);
  --fs-4xl:       clamp(2.5rem,    1.75rem + 3.75vw, 4.5rem);
  --fs-5xl:       clamp(3.5rem,    2.25rem + 6.25vw, 7rem);
  --fs-display:   clamp(3.5rem,    2.0rem  + 7.5vw,  9rem);

  --lh-tight:     1.05;
  --lh-snug:      1.18;
  --lh-base:      1.55;
  --lh-loose:     1.7;

  --lt-tighter:   -0.04em;
  --lt-tight:     -0.02em;
  --lt-base:      -0.005em;
  --lt-wide:      0.02em;
  --lt-mono:      0;

  /* Legacy weight tokens (now mapped to wght axis) */
  --fw-light:     var(--wght-light);
  --fw-regular:   var(--wght-regular);
  --fw-medium:    var(--wght-medium);
  --fw-semibold:  var(--wght-semibold);
  --fw-bold:      var(--wght-bold);

  /* ── SPACING (8pt grid) ──────────────────────────────── */
  --sp-0: 0;       --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem;
  --sp-4: 1rem;    --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-7: 1.75rem;
  --sp-8: 2rem;    --sp-10: 2.5rem; --sp-12: 3rem;   --sp-14: 3.5rem;
  --sp-16: 4rem;   --sp-20: 5rem;   --sp-24: 6rem;   --sp-32: 8rem;
  --sp-40: 10rem;  --sp-48: 12rem;

  /* ── LAYOUT ──────────────────────────────────────────── */
  --container-max:    1280px;
  --container-px:     clamp(1rem, 4vw, 2.5rem);
  --header-h:         64px;
  --section-py:       clamp(4rem, 8vw, 8rem);
  --section-py-lg:    clamp(6rem, 12vw, 12rem);

  /* ── BORDER ──────────────────────────────────────────── */
  --r-0: 0px; --r-sm: 2px; --r-base: 4px; --r-lg: 8px; --r-pill: 999px;

  /* ── MOTION ──────────────────────────────────────────── */
  --dur-instant: 100ms; --dur-fast: 180ms;  --dur-base: 320ms;
  --dur-slow:    600ms; --dur-slower: 900ms; --dur-page: 1200ms;
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:      cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-linear:  linear;

  /* ── Z-INDEX ─────────────────────────────────────────── */
  --z-base: 1; --z-progress: 50; --z-fab: 70;
  --z-header: 80; --z-mobile-nav: 90; --z-modal: 100;

  /* ── SHADOWS ─────────────────────────────────────────── */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-base:  0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg:    0 12px 32px rgba(0, 0, 0, 0.6);
  --shadow-glow:  0 0 0 1px var(--bd-accent), 0 0 32px var(--ac-soft);
}

/* ─────────────────────────────────────────────────────────────
   Mona Sans (variable, OFL — by GitHub).
   Download: https://github.com/github/mona-sans → Mona-Sans.woff2
   See assets/fonts/README.md.

   Until the WOFF2 file is downloaded, the site falls back to Inter
   or the system stack defined in --ff-sans.
   ───────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Mona Sans';
  src: url('../fonts/Mona-Sans.woff2') format('woff2-variations'),
       url('../fonts/Mona-Sans.woff2') format('woff2');
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* Apply variable axes globally when Mona Sans loads */
html { font-variation-settings: "wght" var(--wght-regular), "wdth" var(--wdth-normal); }
h1, h2, h3, h4, h5, h6 { font-variation-settings: "wght" var(--wght-semibold), "wdth" var(--wdth-normal); }
strong, b { font-variation-settings: "wght" var(--wght-bold), "wdth" var(--wdth-normal); }