/* PuzzleDuo — tokens.css
   Every value in the product lives here. No component file may hardcode a hex.
   Source: VISUAL-SPEC §1 (colour), §0 (dark stage + amendments), §2 (type),
   §3 (spacing), §4 (surface). */

:root {
  /* ---- paper & ink ------------------------------------------------------- */
  --paper-0: #FDFAF4;
  --paper-1: #F7F1E7;
  --paper-2: #EFE7D8;
  --paper-3: #E6DBC8;
  --ink-900: #2B2018;
  --ink-700: #4A3B2E;
  --ink-500: #7A6754;

  /* ---- clay -------------------------------------------------------------- */
  --clay-100: #F6E3D8;
  --clay-500: #C2603C;
  --clay-600: #A8462A;
  --clay-700: #8C3922;
  --clay-800: #6F2C1A;

  /* ---- accents (graphic only, never small text) -------------------------- */
  --sage-500: #7C8C6F;
  --sage-600: #5F6E52;
  --ochre-500: #C08A3E;

  /* ---- hairlines --------------------------------------------------------- */
  --line-100: #EDE3D3;
  --line-200: #E4D9C6;
  --line-300: #D6C7AE;

  /* ---- state ------------------------------------------------------------- */
  --focus-ring: #C2603C;
  --focus-offset: #FDFAF4;
  --danger-600: #9A2E20;
  --warn-600: #B07C2E;
  --warn-700: #8A5F20;
  --shadow-ink: 67, 48, 32;

  /* ---- dark stage (§0.2) ------------------------------------------------- */
  --stage-900: #2A211B;
  --stage-800: #33281F;
  --stage-100: #FDFAF4;
  --stage-70: rgba(253, 250, 244, 0.70);
  --stage-40: rgba(253, 250, 244, 0.40);
  --stage-hair: rgba(253, 250, 244, 0.06);
  --stage-grain: rgba(253, 250, 244, 0.028);

  /* ---- type -------------------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-ui: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --fs-display-xl: clamp(2.5rem, 5.2vw, 4rem);
  --fs-h1: 2.75rem;
  --fs-h2: 2rem;
  --fs-h3: 1.25rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-mono: 0.8125rem;
  --fs-label: 0.75rem;

  --lh-tight: 0.98;
  --lh-head: 1.06;
  --lh-h2: 1.15;
  --lh-h3: 1.35;
  --lh-body-lg: 1.55;
  --lh-body: 1.6;
  --lh-small: 1.45;

  --ls-display: -0.02em;
  --ls-h1: -0.015em;
  --ls-h2: -0.01em;
  --ls-h3: -0.005em;
  --ls-label: 0.08em;
  --ls-mono: 0.01em;

  /* ---- spacing (4 8 12 16 24 32 48 64 96 128 — nothing off-scale) -------- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s6: 24px;
  --s8: 32px;
  --s12: 48px;
  --s16: 64px;
  --s24: 96px;
  --s32: 128px;

  /* ---- radii -------------------------------------------------------------- */
  --r-sheet: 2px;
  --r-xs: 8px;
  --r-btn: 10px;
  --r-card: 16px;
  --r-panel: 20px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* ---- elevation (warm, multi-layer) ------------------------------------- */
  --e0: 0 0 0 1px var(--line-200);
  --e1: 0 1px 2px rgba(var(--shadow-ink), 0.04), 0 2px 8px rgba(var(--shadow-ink), 0.05);
  --e2: 0 4px 12px rgba(var(--shadow-ink), 0.07), 0 8px 24px rgba(var(--shadow-ink), 0.06);
  --e3: 0 1px 1px rgba(var(--shadow-ink), 0.06), 0 8px 18px -6px rgba(var(--shadow-ink), 0.18), 0 24px 48px -24px rgba(var(--shadow-ink), 0.28);
  --e4: 0 -1px 0 var(--line-200), 0 -8px 24px rgba(var(--shadow-ink), 0.06);
  --e-stage: 0 18px 40px -18px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.35);
  --e-lift: 0 12px 20px -8px rgba(0, 0, 0, 0.5);

  /* ---- motion ------------------------------------------------------------- */
  --dur-fast: 120ms;
  --dur-med: 160ms;
  --dur-slow: 240ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* ---- layout ------------------------------------------------------------- */
  --w-page: 1200px;
  --w-inner: 1120px;
  --w-prose: 720px;
  --w-workspace: 1440px;
  --gutter: 16px;
  --rail: 380px;
  --header-h: 76px;

  /* ---- grain (pure CSS, §4) ---------------------------------------------- */
  --grain-a: rgba(var(--shadow-ink), 0.055);
  --grain-b: rgba(var(--shadow-ink), 0.035);

  /* ---- print-safe line ramp (§0) ----------------------------------------- */
  --line-black: #000000;
  --line-charcoal: #3F3F3F;
  --line-blue: #2F6FA8;
  --line-grey: #6E6E6E;
  --line-white: #FFFFFF;
}

@media (min-width: 768px) {
  :root { --gutter: 24px; --header-h: 76px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 40px; }
}
@media (min-width: 1280px) {
  :root { --gutter: 56px; }
}

/* Rail widths per §0.3: 380 / 320 / stacked */
@media (max-width: 1279px) {
  :root { --rail: 320px; }
}

/* ---------------------------------------------------------------- fonts ----
   Self-hosted, so nothing on the critical path leaves this origin. All three
   families are SIL Open Font License 1.1 (commercial use and self-hosting
   permitted); the licence texts ship next to the files in assets/fonts/.

   The three families are variable fonts: one file per (family, style, subset)
   covers every weight the site uses. Google serves the same files, so the byte
   count is unchanged — what disappears is the render-blocking stylesheet on
   fonts.googleapis.com and the two extra DNS/TLS handshakes behind it.

   Subsets are latin + latin-ext only. A browser downloads a subset only when a
   character on the page falls inside its unicode-range, so an English page
   fetches four files (Fraunces roman + italic, Nunito roman, JetBrains Mono)
   and never touches the latin-ext ones. */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/fraunces-var-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/fraunces-var-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/fraunces-var-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/fraunces-var-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-var-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-var-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/nunito-sans-var-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/nunito-sans-var-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: italic;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/nunito-sans-var-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: italic;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/nunito-sans-var-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}