/* ==========================================================================
   tokens.css — design tokens only.
   Contains: @font-face, :root custom properties, theme overrides. Nothing else.
   Every selector rule, layout value and component lives in styles.css.
   Load order: tokens.css BEFORE styles.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts — Geist / Geist Mono, self-hosted.
   (c) 2023 Vercel, in collaboration with basement.studio. SIL OFL 1.1.
   Full licence text: assets/fonts/OFL.txt
   Variable woff2, wght axis clamped to 400-600 and subset to Latin +
   punctuation/symbols. One file per family covers 400, 500 and 600.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Geist";
  src: url("fonts/geist-variable.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono-variable.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Light theme — the default.
   -------------------------------------------------------------------------- */

:root {
  /* colour */
  --ground: #FBF9F7;
  --surface: #FFFFFF;
  --sunk: #F2EDE8;
  --ink: #17120E;
  --ink-2: #574B41;
  --ink-3: #7D6D60;
  --line: #E6DED6;
  --line-strong: #96836F;
  --accent: #B00070;
  --accent-hover: #8E005A;
  --on-accent: #FFFFFF;
  --patina: #1F6B5E;
  --focus: #B00070;

  /* derived colour — translucent, cannot be expressed in styles.css
     without a colour literal. See report. */
  --accent-wash: rgba(176, 0, 112, 0.07);
  --scrim: rgba(251, 249, 247, 0.85);
  --shadow: 0 1px 2px rgba(23, 18, 14, 0.04), 0 2px 8px rgba(23, 18, 14, 0.05);
  --shadow-lg: 0 2px 4px rgba(23, 18, 14, 0.04), 0 12px 32px rgba(23, 18, 14, 0.08);

  /* native UA surfaces (scrollbars, form controls, autofill) */
  --scheme: light;

  /* type */
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.75s;
  --dur-l: 1s;
  --dur-s: 0.18s;
  --rise: 16px;

  /* measure */
  --shell: 72rem;
  --measure: 36rem;
  --radius: 12px;
  --radius-sm: 8px;

  /* --------------------------------------------------------------------------
     Dark-palette aliases. Always resolve to the dark values regardless of the
     active theme, so a locally-dark section (section.band-dark) can re-declare
     the real token names from these and have its children inherit normally.
     Without these, styles.css derives approximations via color-mix, which
     desaturates --accent. These make the dark band exact.
     -------------------------------------------------------------------------- */
  --dark-ground: #0E090D;
  --dark-surface: #171018;
  --dark-sunk: #130D14;
  --dark-ink: #F2EDF2;
  --dark-ink-2: #B0A4AF;
  --dark-ink-3: #877B86;
  --dark-line: #2A2029;
  --dark-line-strong: #746A73;
  --dark-accent: #EF068E;
  --dark-accent-hover: #F73FA5;
  --dark-accent-wash: rgba(239, 6, 142, 0.14);
  --dark-on-accent: #170F14;
  --dark-patina: #4FB8A4;
  --dark-focus: #EF068E;

  /* ------------------------------------------------------------------------
     Accent sheen — the lit fill under a button.

     It is deliberately subtle. .btn also carries a white ::after that sweeps
     across on hover, and THAT is the specular highlight; if the base gradient
     tries to be a highlight too, the two read as a two-colour wipe rather
     than as one lit surface. This is the mistake the first magenta version
     made: 42 degrees of hue travel with a broad crest, which looked like
     crimson blended into violet. Hue travel here is 10 degrees — one magenta,
     lit unevenly.

     The crest is also narrower (42-58% of the image, against 34-66% before).
     .btn stretches this to 220% and slides it on hover, so a crest that is
     wide in image space fills most of the visible button.

     Every stop still clears 4.5:1 against the white label on its own: 8.85:1
     at the ends, 6.12:1 at the crest. The extra headroom over the old ramp is
     what lets the ::after sweep sit on top without failing.
     ------------------------------------------------------------------------ */
  --sheen: linear-gradient(100deg,
    #970234 0%, #A70241 22%, #B40453 42%, #BF0863 50%,
    #B30556 58%, #A70244 78%, #970236 100%);
  --sheen-hover: linear-gradient(100deg,
    #AC023A 0%, #B60247 22%, #C8045C 42%, #D3096E 50%,
    #C70560 58%, #B6024A 78%, #AC023D 100%);

  /* --sheen does not follow the theme, so its label must not either. Reading
     --on-accent here breaks in any locally-dark context: .masthead rebinds it
     to --dark-on-accent (dark ink, correct against the bright --dark-accent),
     but the button underneath is still the deep light-palette sheen, so the
     label went dark on dark magenta. Fill and label are one pair. */
  --on-sheen: #FFFFFF;

  /* The edges that make a fill read as a surface rather than a rectangle:
     a light lip along the top, a dark one along the bottom. 1px each, at the
     border only, so neither sits behind the label. */
  --btn-lip: inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22);
  --btn-cast: 0 6px 20px -8px rgba(176, 0, 112, 0.55);


  /* Ambient hero light — two soft off-screen sources. This is what makes the
     sheen read as lit rather than painted. Key is the brand magenta; the fill
     is violet rather than the patina teal, because the reference has no teal
     in it and magenta/violet is what makes a crystal read as one material
     lit twice rather than two materials. --patina keeps its semantic job
     elsewhere. */
  --glow-key: radial-gradient(42rem 32rem at 12% 18%,
    rgba(198, 24, 138, 0.34), rgba(198, 24, 138, 0) 70%);
  --glow-fill: radial-gradient(38rem 30rem at 88% 74%,
    rgba(122, 60, 190, 0.26), rgba(122, 60, 190, 0) 70%);

}

/* --------------------------------------------------------------------------
   Dark theme — system preference.
   Overridden by :root[data-theme] below (higher specificity, order-independent).
   -------------------------------------------------------------------------- */

/* The page is deliberately light with a dark hero band, so it does NOT follow
   prefers-color-scheme. Dark stays reachable via <html data-theme="dark">, and
   the --dark-* aliases above are what the dark hero and #limits band re-declare.
   ------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Explicit theme — set by boot.js on <html data-theme>. Wins over both above.
   -------------------------------------------------------------------------- */

:root[data-theme="light"] {
  --ground: #FBF9F7;
  --surface: #FFFFFF;
  --sunk: #F2EDE8;
  --ink: #17120E;
  --ink-2: #574B41;
  --ink-3: #7D6D60;
  --line: #E6DED6;
  --line-strong: #96836F;
  --accent: #B00070;
  --accent-hover: #8E005A;
  --on-accent: #FFFFFF;
  --patina: #1F6B5E;
  --focus: #B00070;

  --accent-wash: rgba(176, 0, 112, 0.07);
  --scrim: rgba(251, 249, 247, 0.85);
  --shadow: 0 1px 2px rgba(23, 18, 14, 0.04), 0 2px 8px rgba(23, 18, 14, 0.05);
  --shadow-lg: 0 2px 4px rgba(23, 18, 14, 0.04), 0 12px 32px rgba(23, 18, 14, 0.08);

  --scheme: light;
}

:root[data-theme="dark"] {
  --ground: #0E090D;
  --surface: #171018;
  --sunk: #130D14;
  --ink: #F2EDF2;
  --ink-2: #B0A4AF;
  --ink-3: #877B86;
  --line: #2A2029;
  --line-strong: #746A73;
  --accent: #EF068E;
  --accent-hover: #F73FA5;
  --on-accent: #170F14;
  --patina: #4FB8A4;
  --focus: #EF068E;

  --accent-wash: rgba(239, 6, 142, 0.14);
  --scrim: rgba(14, 9, 13, 0.85);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.40), 0 2px 8px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.40), 0 12px 32px rgba(0, 0, 0, 0.50);

  --scheme: dark;
}