/* ============================================================
   Design tokens — single source of truth for the whole site.
   Change a brand value here, never in a page stylesheet.
   ============================================================ */

:root {
  /* ---- Chromatic scale -------------------------------------
     The FindColor palette. These same hexes drive the landing's
     shader field, the specimen swatches and the history steps. */
  --c-coral:   #FF6B4A;
  --c-orchid:  #A160D3;
  --c-blue:    #2F5FC6;
  --c-gold:    #D8B23A;
  --c-green:   #1F6F4A;
  --c-minio:   #C6402F;
  --c-tyrian:  #5C1A4B;
  --c-rose:    #C1466B;
  --c-indigo:  #7A6BF2;
  --c-violet:  #B93FD1;

  /* ---- Typography ------------------------------------------
     Display for headlines, body for prose, mono for metadata.
     The system pair is used by the document pages, which stay
     dependency-free and load no webfonts. */
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body: Archivo, Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-system-mono: Menlo, ui-monospace, SFMono-Regular, Consolas, monospace;

  /* ---- Gutters ---------------------------------------------
     Only the page gutter is tokenised. The landing's vertical
     rhythm is deliberately off-grid (26/34/44/52…), so pinning
     it to an 8pt scale would change the design rather than
     describe it — those values stay literal in landing.css. */
  --gutter: 34px;
  --gutter-sm: 22px;

  /* ---- Radii ----------------------------------------------- */
  --radius-md: 26px;
  --radius-lg: 30px;
  --radius-pill: 999px;

  /* ---- Motion ---------------------------------------------- */
  --ease: cubic-bezier(.2, 0, 0, 1);
  --dur-swap: 380ms;
  --dur-reveal: 900ms;

  /* ---- Layout ---------------------------------------------- */
  --measure: 1180px;
  --bp-md: 860px;
  --bp-sm: 560px;
}

/* ============================================================
   Dark surface — the landing page.
   ============================================================ */
:root {
  --dark-bg: #1B1220;
  --dark-fg: #fff;

  /* Glass panels layered over the shader field. */
  --glass-bg: rgba(255, 255, 255, .13);
  --glass-bg-strong: rgba(255, 255, 255, .14);
  --glass-line: rgba(255, 255, 255, .26);
  --glass-line-strong: rgba(255, 255, 255, .28);
  --glass-blur: blur(16px);
  --glass-blur-sm: blur(14px);

  /* Text emphasis ladder on the dark surface. */
  --dark-fg-strong: rgba(255, 255, 255, .92);
  --dark-fg-body: rgba(255, 255, 255, .85);
  --dark-fg-muted: rgba(255, 255, 255, .7);
  --dark-fg-faint: rgba(255, 255, 255, .5);

  --shadow-chip: 0 18px 50px rgba(0, 0, 0, .25);
  --shadow-title: 0 12px 60px rgba(0, 0, 0, .28);
}

/* ============================================================
   Light surface — privacy, /go and any future document page.
   ============================================================ */
:root {
  --doc-bg: #F4F2ED;
  --doc-ink: #111111;
  --doc-ink-soft: rgba(0, 0, 0, .72);
  --doc-ink-muted: rgba(0, 0, 0, .55);
  --doc-ink-faint: rgba(0, 0, 0, .4);
  --doc-line: rgba(0, 0, 0, .18);
}