/* The Exchange — design tokens. THE single source of truth (decided 2026-08-12,
   renamed from The Garden 2026-08-30 — same palette, --garden-* names kept for
   now; full rename to --exchange-* tracked under wonderwall-8o1.10).
   Rebrand/rename/palette swap = edit THIS file only.
   Consumers: app/app/garden/garden.css (bundled app + demo) and
   app/public/about/brand.css (static marketing pages) — both reference
   var(--garden-*) with literal fallbacks, so they degrade safely.

   Rules that travel with these tokens (locked, see plan §3.1 + memory):
   - citron is RESERVED for real actions and chip-scale badges — never large fills
   - contrast minimums on ink: metadata ≥ 6:1 (dim), body ≥ 9:1 — do not darken
   - no text below 10.5px */

:root {
  /* Surfaces */
  --garden-ink: #121212;
  --garden-ink-raised: #1c1c19;
  --garden-paper: #f7f7f4;

  /* Lines */
  --garden-hairline: #2a2a28;
  --garden-hairline-raised: #3a3a36;

  /* Text on ink (contrast-corrected 2026-08-12) */
  --garden-dim: #94948c;    /* metadata, mono labels — ~6:1 */
  --garden-muted: #acaca4;  /* credits, secondary — ~8:1 */
  --garden-body: #c6c6be;   /* body text — ~11:1 */

  /* Accent */
  --garden-citron: #d7f25a;

  /* Type */
  --garden-font-hero: "Archivo Black", "Archivo", sans-serif;
  --garden-font-display: "Bricolage Grotesque", sans-serif;
  --garden-font-body: "Archivo", -apple-system, sans-serif;
  --garden-font-mono: "JetBrains Mono", monospace;

  /* Shape */
  --garden-radius-tight: 3px;
  --garden-radius-card: 10px;

  /* App-shell surface tokens (wonderwall-8o1.reskin) — for the authenticated
     app (_app.tsx and the pages inside it), which unlike the marketing
     pages above still supports light AND dark via the OS preference (no
     manual toggle exists — same auto-only behavior Tailwind's `dark:`
     classes already relied on here). The --garden-* tokens above are the
     FIXED dark palette the marketing pages always render in; these
     --app-* tokens are the ones that actually flip with prefers-color-
     scheme, light values live here, dark overrides are in the media query
     below. citron itself needs no light variant as a FILL (ink text on
     citron reads fine on either ground) — --app-accent-ink exists only for
     when citron would be used as TEXT/icon color on a light surface, where
     raw citron fails contrast; use the citron fill pattern instead wherever
     that reads more naturally.

     --app-surface-raised is deliberately its OWN value, not an alias to
     --garden-ink-raised/paper — persistent chrome (the fixed mobile nav,
     the sidebar) sits over scrolling content and needs to read as a solid
     bar at a glance, not just a hairline outline. The old alias put it
     ~5-10 lightness units off --app-surface, close enough that the nav
     looked transparent — page content scrolling underneath visually
     "won" against it. This bump keeps the same warm-neutral hue, just
     with real separation. */
  --app-surface: var(--garden-paper);
  --app-surface-raised: #e3e3d6;
  --app-hairline: #e2e2d8;
  --app-hairline-raised: #d3d3c5;
  --app-text: var(--garden-ink);
  --app-text-dim: #6b6b62;
  --app-text-muted: #514f43;
  --app-accent: var(--garden-citron);
  --app-accent-ink: #4d7c0f;
  --app-accent-wash: rgba(215, 242, 90, 0.22);
}

@media (prefers-color-scheme: dark) {
  :root {
    --app-surface: var(--garden-ink);
    --app-surface-raised: #242420;
    --app-hairline: var(--garden-hairline);
    --app-hairline-raised: var(--garden-hairline-raised);
    --app-text: var(--garden-paper);
    --app-text-dim: var(--garden-dim);
    --app-text-muted: var(--garden-muted);
    --app-accent: var(--garden-citron);
    --app-accent-ink: var(--garden-citron);
    --app-accent-wash: rgba(215, 242, 90, 0.14);
  }
}