/* ==========================================================================
   Exoframe Labs — tokens.css
   Single source of truth. Light on :root, dark via [data-theme="dark"] and
   prefers-color-scheme (unless the user pinned light). Motion is zeroed by
   [data-motion="off"] (set by the head script from OS + user choice) and by
   prefers-reduced-motion when JS has not run.
   ========================================================================== */

/* ---- Fonts: self-hosted latin variable WOFF2 (no third-party request) ----
   Fallback faces are metric-matched to local Arial / Courier New so the swap
   from system font to webfont does not shift layout. Regenerate the numbers
   (size-adjust etc.) if the font files change. */
@font-face {
  font-family: "Instrument Sans";
  src: url("../assets/fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Roboto");
  size-adjust: 102.49%;
  ascent-override: 94.64%;
  descent-override: 24.39%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Roboto");
  size-adjust: 107.04%;
  ascent-override: 90.5%;
  descent-override: 22.53%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "JetBrains Mono Fallback";
  src: local("Courier New"), local("CourierNewPSMT");
  size-adjust: 99.98%;
  ascent-override: 102.02%;
  descent-override: 30%;
  line-gap-override: 0%;
}

:root,
[data-theme="light"] {
  color-scheme: light;

  /* ---- Color ---------------------------------------------------------- */
  --paper: #FAFAF8;
  --paper-2: #F2F2EE;
  --surface: #FFFFFF;
  --surface-2: #F6F6F3;
  --ink: #0A0A0A;
  --ink-2: #4A4A48;
  --ink-3: #8A8A86;          /* non-text only: icons, dashes, disabled */
  --line: #E6E6E1;
  --line-2: #CFCFC9;
  --volt: #C8FF3A;
  --volt-deep: #A6DB1F;
  --volt-tint: #F3FFD1;
  --on-volt: #0A0A0A;
  --danger: #D93A2B;
  --success: #1F9D55;
  --focus: #0A0A0A;
  --slime: #1F9AF0;
  --rites: #E06A1B;

  /* Text-safe derivatives (>= 4.5:1 on paper, paper-2 and surface) */
  --placeholder: #73736F;
  --danger-ink: #C4321F;
  --success-ink: #177A40;
  --spark: var(--ink);       /* sparkle colour on paper; volt on dark */
  --spark-on-ink: var(--volt); /* sparkle sitting on an ink fill */
  --scrim: rgb(10 10 10 / .42);
  --stripe: rgb(10 10 10 / .045);
  --shimmer: rgb(255 255 255 / .7);

  /* ---- Type ----------------------------------------------------------- */
  --font-display: "Instrument Sans", "Instrument Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-md: 1rem;
  --t-lg: 1.125rem;
  --t-xl: clamp(1.25rem, 2vw + 0.875rem, 1.5rem);
  --t-2xl: clamp(1.75rem, 3vw + 1rem, 2.5rem);
  --t-3xl: clamp(2.25rem, 5vw + 1rem, 4rem);
  --t-hero: clamp(2.5rem, 7vw + 0.75rem, 5.5rem);

  --lh-hero: 1.0;
  --lh-display: 1.1;
  --lh-body: 1.55;
  --tracking-display: -0.02em;
  --measure: 62ch;

  /* ---- Space ---------------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 120px;
  --gutter: clamp(16px, 5vw, 48px);
  --container: 1120px;

  /* ---- Radius --------------------------------------------------------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---- Elevation ------------------------------------------------------ */
  --shadow-rgb: 10 10 10;
  --e1: 0 1px 2px rgb(var(--shadow-rgb) / .06), 0 0 0 1px var(--line);
  --e2: 0 6px 16px rgb(var(--shadow-rgb) / .08), 0 0 0 1px var(--line-2);
  --e3: 0 20px 40px rgb(var(--shadow-rgb) / .18), 0 0 0 1px var(--line);

  /* ---- Motion --------------------------------------------------------- */
  --d-press: 90ms;
  --d-fast: 160ms;
  --d-base: 240ms;
  --d-slow: 400ms;
  --d-stagger: 40ms;
  --d-twinkle: 1400ms;
  --d-shimmer: 1400ms;
  --d-marquee: 32s;
  --d-spin: 700ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  /* ---- Z -------------------------------------------------------------- */
  --z-nav: 20;
  --z-sheet: 30;
  --z-modal: 40;
  --z-toast: 50;
  --z-sparkle: 60;

  /* ---- Touch ---------------------------------------------------------- */
  --tap: 44px;
  --nav-h: 56px;               /* 64px from 768px up */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* ---- Dark ------------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0B0B0C;
  --paper-2: #131315;
  --surface: #161618;
  --surface-2: #1C1C1F;
  --ink: #F4F4F1;
  --ink-2: #A9A9A4;
  --ink-3: #6E6E6A;
  --line: #242427;
  --line-2: #333337;
  --volt-tint: #1E2A08;
  --danger: #FF6B5B;
  --success: #3DD68C;
  --focus: #F4F4F1;
  --placeholder: #8C8C87;
  --danger-ink: #FF6B5B;
  --success-ink: #3DD68C;
  --spark: var(--volt);
  --spark-on-ink: #0B0B0C;
  --scrim: rgb(0 0 0 / .62);
  --stripe: rgb(255 255 255 / .04);
  --shimmer: rgb(255 255 255 / .06);
  --shadow-rgb: 0 0 0;
  --e1: 0 1px 2px rgb(0 0 0 / .5), 0 0 0 1px var(--line);
  --e2: 0 6px 16px rgb(0 0 0 / .5), 0 0 0 1px var(--line-2);
  --e3: 0 20px 40px rgb(0 0 0 / .5), 0 0 0 1px var(--line);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0B0B0C;
    --paper-2: #131315;
    --surface: #161618;
    --surface-2: #1C1C1F;
    --ink: #F4F4F1;
    --ink-2: #A9A9A4;
    --ink-3: #6E6E6A;
    --line: #242427;
    --line-2: #333337;
    --volt-tint: #1E2A08;
    --danger: #FF6B5B;
    --success: #3DD68C;
    --focus: #F4F4F1;
    --placeholder: #8C8C87;
    --danger-ink: #FF6B5B;
    --success-ink: #3DD68C;
    --spark: var(--volt);
  --spark-on-ink: #0B0B0C;
    --scrim: rgb(0 0 0 / .62);
    --stripe: rgb(255 255 255 / .04);
    --shimmer: rgb(255 255 255 / .06);
    --shadow-rgb: 0 0 0;
    --e1: 0 1px 2px rgb(0 0 0 / .5), 0 0 0 1px var(--line);
    --e2: 0 6px 16px rgb(0 0 0 / .5), 0 0 0 1px var(--line-2);
    --e3: 0 20px 40px rgb(0 0 0 / .5), 0 0 0 1px var(--line);
  }
}

/* ---- Reduced motion: every duration to zero -------------------------- */
:root[data-motion="off"] {
  --d-press: 0ms;
  --d-fast: 0ms;
  --d-base: 0ms;
  --d-slow: 0ms;
  --d-stagger: 0ms;
  --d-twinkle: 0ms;
  --d-shimmer: 0ms;
  --d-marquee: 0ms;
  --d-spin: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion]) {
    --d-press: 0ms;
    --d-fast: 0ms;
    --d-base: 0ms;
    --d-slow: 0ms;
    --d-stagger: 0ms;
    --d-twinkle: 0ms;
    --d-shimmer: 0ms;
    --d-marquee: 0ms;
    --d-spin: 0ms;
  }
}

@media (min-width: 768px) { :root { --nav-h: 64px; } }