/* Pathfinder site design tokens. Concept: Lanes. Light, calm, cool-neutral canvas
   with a four-color lane system derived from the rainbow-P mark. */

/* Mono, self-hosted (was Google Fonts). Same-origin so no request
   leaves for a third party: the product-privacy claim on /privacy/ has to hold
   for the site too. Versioned folder (site-v1) is cached immutably; bump to
   site-v2 to update. Colossal Sans (below) carries both display and body. */
@font-face {
  font-family: "Spline Sans Mono";
  src: url("../fonts/site-v1/spline-sans-mono-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  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: "Spline Sans Mono";
  src: url("../fonts/site-v1/spline-sans-mono-latin-ext.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Colossal Sans - the Colossal brand typeface (OFL-1.1, a renamed cut of Plus
   Jakarta Sans). Self-hosted, same-origin, in a versioned folder so it can be
   cached immutably. See assets/fonts/colossal-sans-v1/ (OFL.txt ships with it). */
/* Weights 200 and 300 ship in the font package but nothing on the site uses them,
   so they are not declared here. (A declared-but-unused face costs no download,
   but it is dead CSS; the files stay in the package untouched.) */
@font-face { font-family: "Colossal Sans"; src: url("../fonts/colossal-sans-v1/ColossalSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Colossal Sans"; src: url("../fonts/colossal-sans-v1/ColossalSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Colossal Sans"; src: url("../fonts/colossal-sans-v1/ColossalSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Colossal Sans"; src: url("../fonts/colossal-sans-v1/ColossalSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Colossal Sans"; src: url("../fonts/colossal-sans-v1/ColossalSans-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;

  /* Header (translucent, theme-aware) */
  --header-bg: oklch(0.985 0.003 262 / 0.72);
  --header-bg-scrolled: oklch(0.985 0.003 262 / 0.86);

  /* Neutrals (hue ~262, faint cool tint) */
  --bg: oklch(0.985 0.003 262);
  --surface: oklch(1 0 0);
  --sunken: oklch(0.966 0.004 262);
  --ink: oklch(0.23 0.018 264);
  --ink-2: oklch(0.44 0.02 264);
  /* ink-3 was 0.55, which measured 4.38:1 on --sunken and failed AA at the 1rem
     sizes it is actually used at (.os-meta, .os-note, .hero-note, .compare-note).
     0.52 clears 4.5:1 on all three light surfaces. */
  --ink-3: oklch(0.52 0.02 264);
  --line: oklch(0.91 0.006 262);
  --line-2: oklch(0.86 0.008 262);

  /* Dark band (art direction: non-AI statement + footer) */
  --ink-bg: oklch(0.205 0.02 264);
  --ink-bg-2: oklch(0.255 0.022 264);
  --ink-bg-line: oklch(0.32 0.02 264);
  --on-ink: oklch(0.96 0.004 262);
  --on-ink-2: oklch(0.73 0.012 262);

  /* Lane colors (four-account system, from the mark) */
  --lane-red: oklch(0.62 0.19 25);
  --lane-amber: oklch(0.75 0.14 70);
  --lane-green: oklch(0.66 0.14 155);
  --lane-blue: oklch(0.58 0.16 250);
  --lane-red-soft: oklch(0.62 0.19 25 / 0.12);
  --lane-amber-soft: oklch(0.75 0.14 70 / 0.14);
  --lane-green-soft: oklch(0.66 0.14 155 / 0.13);
  --lane-blue-soft: oklch(0.58 0.16 250 / 0.12);

  /* Text colours for glyphs sitting on a solid lane fill (see .bg-* in
     components.css). Constant across themes: the fills are the same identity
     colours in both, so the on-colour must not flip with the canvas. */
  --on-fill-light: oklch(1 0 0);
  --on-fill-dark: oklch(0.24 0.03 264);

  /* Solid-fill variants of the two lanes that carry white text. The identity
     colours above stay untouched (stripes, chips, the eyebrow gradient); only
     the filled shapes darken, because white clears just 4.0:1 on --lane-red and
     4.3:1 on --lane-blue. Deliberately NOT re-declared in the dark block: a fill
     sits under white text in both themes, so it must not follow the canvas. */
  --lane-red-fill: oklch(0.55 0.19 25);
  --lane-blue-fill: oklch(0.55 0.16 250);

  /* The lane rainbow: the site's one recurring signature, on the eyebrow dashes and
     the nav Download button. Declared once here so "the same rainbow" is the same
     value rather than three literals drifting apart. It resolves against whichever
     lane tokens are in scope, so it follows the dark theme automatically.
     The hero underline in home.css keeps its own copy on purpose: its stops are
     tuned to 34%/66% for that specific width, which this evenly spaced ramp is not. */
  --rainbow: linear-gradient(90deg, var(--lane-red), var(--lane-amber), var(--lane-green), var(--lane-blue));

  /* Filled-shape variant of the rainbow, for the nav Download button. Same four hues
     in the same order, pinned to the lifted values so it does NOT follow the canvas,
     for the same reason --lane-*-fill does not: a label sits on top of it in both
     themes, so it must not track the background.
     Measured with a near-black label (--on-fill-dark): red 5.27, amber 8.67,
     green 7.08, blue 5.28. The light-theme lane values would drop the blue end to
     3.85 and the red to 4.14, both under the 4.5 a 16px 600 label needs. */
  --rainbow-fill: linear-gradient(90deg,
    oklch(0.68 0.18 25), oklch(0.80 0.13 75), oklch(0.72 0.14 158), oklch(0.66 0.15 252));

  /* Interactive */
  --accent: oklch(0.5 0.17 255);
  --accent-hover: oklch(0.44 0.17 256);
  --focus: oklch(0.55 0.18 255);
  /* Form-error text, kept dark enough to clear AA on --surface and --sunken. */
  --danger: oklch(0.48 0.19 25);

  /* One brand family, two roles, separated by weight rather than by typeface.
     Colossal Sans previously carried headings only while Hanken Grotesk carried
     every paragraph; both are humanist-geometric sans, so the pairing read as
     unresolved rather than deliberate. Display and body now share the family and
     differ by weight (700/800 against 400/500/600). */
  --font-display: "Colossal Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Colossal Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, "Cascadia Code", monospace;

  --step-hero: clamp(2.75rem, 1.6rem + 5.4vw, 5rem);
  --step-h2: clamp(2rem, 1.4rem + 2.8vw, 3.1rem);
  --step-h3: clamp(1.35rem, 1.1rem + 1.1vw, 1.7rem);
  --step-lead: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --step-small: 1rem;

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Shadows (soft, single; not paired with borders as decoration) */
  --shadow-sm: 0 1px 2px oklch(0.2 0.02 264 / 0.06);
  --shadow-md: 0 10px 30px -14px oklch(0.2 0.03 264 / 0.22);
  --shadow-lg: 0 30px 70px -30px oklch(0.2 0.04 264 / 0.3);
  --shadow-ink: 0 20px 50px -24px oklch(0.2 0.05 264 / 0.5);

  /* Layout */
  --container: 1120px;
  --container-wide: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2rem);
  --section-y: clamp(4rem, 9vw, 8rem);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.16s;
  --dur: 0.28s;
  --dur-slow: 0.6s;

  /* z-index scale */
  --z-header: 100;
  --z-dropdown: 200;
  --z-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* Dark theme. data-theme is resolved to a concrete "light" | "dark" before
   first paint by the inline head script, so dark keys off this attribute only. */
:root[data-theme='dark'] {
  color-scheme: dark;

  --header-bg: oklch(0.17 0.014 264 / 0.7);
  --header-bg-scrolled: oklch(0.17 0.014 264 / 0.86);

  --bg: oklch(0.17 0.014 264);
  --surface: oklch(0.212 0.016 264);
  --sunken: oklch(0.188 0.015 264);
  --ink: oklch(0.965 0.004 262);
  --ink-2: oklch(0.79 0.012 262);
  --ink-3: oklch(0.63 0.014 262);
  --line: oklch(0.30 0.014 264);
  --line-2: oklch(0.37 0.016 264);

  --ink-bg: oklch(0.135 0.013 264);
  --ink-bg-2: oklch(0.19 0.016 264);
  --ink-bg-line: oklch(0.29 0.016 264);
  --on-ink: oklch(0.965 0.004 262);
  --on-ink-2: oklch(0.72 0.012 262);

  /* Lane colors: same identity, lifted slightly for a dark canvas */
  --lane-red: oklch(0.68 0.18 25);
  --lane-amber: oklch(0.80 0.13 75);
  --lane-green: oklch(0.72 0.14 158);
  --lane-blue: oklch(0.66 0.15 252);
  --lane-red-soft: oklch(0.68 0.18 25 / 0.18);
  --lane-amber-soft: oklch(0.80 0.13 75 / 0.18);
  --lane-green-soft: oklch(0.72 0.14 158 / 0.18);
  --lane-blue-soft: oklch(0.66 0.15 252 / 0.20);

  --accent: oklch(0.72 0.15 255);
  --accent-hover: oklch(0.79 0.15 255);
  --focus: oklch(0.74 0.16 255);
  --danger: oklch(0.72 0.16 25);

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4);
  --shadow-md: 0 12px 32px -14px oklch(0 0 0 / 0.55);
  --shadow-lg: 0 30px 70px -30px oklch(0 0 0 / 0.62);
  --shadow-ink: 0 20px 50px -24px oklch(0 0 0 / 0.7);
}