/* Matryn marketing site — design tokens.
   Canonical definitions and rationale: docs/LANDING-DESIGN-LANGUAGE.md §5.

   Two surface scopes exist: the default light "paper" scope on :root, and a "night"
   scope applied to inverted bands via [data-surface="night"]. Night is a *band*, not
   a theme — there is no user-facing theme toggle on this page, because the page is
   read once. The app has the theme toggle; see matryn/src/app/layout.tsx. */

:root {
  /* ---- Paper: cool, crisp near-white (Harvey/Aaru register) --------------
     The first build ran a warm bone (#f7f6f2). This surface is cooler and a
     shade lighter — crisper, airier, closer to the clean enterprise-AI sites.
     The ink stays dark, so every measured contrast pair improves rather than
     regresses on the lighter ground. */
  --paper: #f7f8f9;
  --paper-2: #ffffff;
  --paper-3: #eceff1;
  --rule: rgba(15, 23, 30, 0.09);
  --rule-strong: rgba(15, 23, 30, 0.16);

  /* ---- Ink: cool neutral slate, near-black ------------------------------- */
  --ink: #0e161d;
  --ink-2: rgba(14, 22, 29, 0.7);
  /* 0.62 clears >=4.5:1 for 11px text on all three light surfaces now that the
     ground is lighter than the old bone (paper ~5.0, white ~5.2, paper-3 ~4.8).
     Measured, not guessed — docs/DESIGN.md section 1 is the standing reminder. */
  --ink-3: rgba(14, 22, 29, 0.62);
  /* Non-text only: window dots, gauge tracks, inactive step markers. Any text
     that reaches for a fourth tier uses --fg-3 instead. */
  --ink-4: rgba(14, 22, 29, 0.32);

  /* ---- Night: the inverted band ------------------------------------------ */
  --night: #0a0f10;
  --night-2: #121a1b;
  --night-3: #182122;
  --night-rule: rgba(255, 255, 255, 0.1);
  --night-rule-strong: rgba(255, 255, 255, 0.2);
  --on-night: #ffffff;
  --on-night-2: rgba(255, 255, 255, 0.72);
  --on-night-3: rgba(255, 255, 255, 0.46);

  /* ---- Brand: horizon teal, inherited from the holding page --------------- */
  --horizon: #35696f;
  --horizon-deep: #1e4a50;
  --horizon-lit: #5e9aa0;
  --horizon-wash: rgba(53, 105, 111, 0.08);

  /* ---- Status: the only other colour, and only ever on status ------------- */
  --go: #1f7a55;
  --go-bg: rgba(31, 122, 85, 0.1);
  --caution: #8a5f12;
  --caution-bg: rgba(169, 118, 27, 0.12);
  --hold: #a8362f;
  --hold-bg: rgba(168, 54, 47, 0.1);

  /* Night-band status: lifted so they clear 4.5:1 on --night-2 --------------- */
  --go-lit: #5fd3a0;
  --caution-lit: #f0c069;
  --hold-lit: #ff8e84;

  /* ---- Active surface aliases --------------------------------------------
     Components reference these, never the raw ramps above, so a band can be
     inverted by changing the scope alone. */
  --surface: var(--paper);
  --surface-2: var(--paper-2);
  --surface-3: var(--paper-3);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --fg-4: var(--ink-4);
  --line: var(--rule);
  --line-strong: var(--rule-strong);
  --accent: var(--horizon);
  --accent-deep: var(--horizon-deep);
  --status-go: var(--go);
  --status-caution: var(--caution);
  --status-hold: var(--hold);

  /* ---- Type -------------------------------------------------------------- */
  --font-display: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --font-sans: "Geist", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --display-1: clamp(2.75rem, 6.2vw, 4.75rem); /* 44 → 76 */
  --display-2: clamp(2rem, 4.2vw, 3.25rem); /*  32 → 52 */
  --display-3: clamp(1.5rem, 2.6vw, 2.125rem); /* 24 → 34 */
  --lead: clamp(1.0625rem, 1.35vw, 1.1875rem); /* 17 → 19 */

  /* ---- Shape ------------------------------------------------------------- */
  --r-control: 6px;
  --r-card: 10px;
  --r-panel: 14px;
  --r-pill: 999px;

  --shadow-float: 0 1px 2px rgba(14, 22, 29, 0.04), 0 12px 32px rgba(14, 22, 29, 0.06);
  --shadow-lift: 0 2px 4px rgba(14, 22, 29, 0.05), 0 24px 56px rgba(14, 22, 29, 0.1);

  /* ---- Layout ------------------------------------------------------------ */
  --content: 1200px;
  --measure: 62ch;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  /* Zaplar: 28px on its four feature sections, 80/100 on the problem band,
     40/96 on the FAQ. The rhythm there comes from content, not padding. A
     touch more air than the first build — the reference AI sites breathe. */
  --band-y: clamp(3.25rem, 6.5vw, 6rem);
  --nav-h: 68px;

  /* ---- Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --t-hover: 160ms;
  --t-press: 110ms;
  --t-panel: 420ms;
  --t-reveal: 620ms;
}

[data-surface="night"] {
  --surface: var(--night);
  --surface-2: var(--night-2);
  --surface-3: var(--night-3);
  --fg: var(--on-night);
  --fg-2: var(--on-night-2);
  --fg-3: var(--on-night-3);
  --fg-4: rgba(255, 255, 255, 0.28);
  --line: var(--night-rule);
  --line-strong: var(--night-rule-strong);
  --accent: var(--horizon-lit);
  --accent-deep: var(--horizon-lit);
  --status-go: var(--go-lit);
  --status-caution: var(--caution-lit);
  --status-hold: var(--hold-lit);
}