/* ==========================================================================
   reportwithecho.com — design tokens (citizen variant)

   Copied from admin/src/styles.css :root with citizen overrides per
   PRODUCT.md and the v2 design brief.

   - Light only. <meta name="color-scheme" content="light"> in index.html
     opts out of Android Chrome forced-dark.
   - Two type families: Big Shoulders Display (editorial display, 32px+
     only — hero + section H2s) and Hanken Grotesk (body). Both loaded
     from Google Fonts with display=swap; system stack rendered first.
   - Tiered AAA contrast bar (per the v2 brief):
     - AAA required, no fallback: body, primary CTAs, all trust copy.
     - AA acceptable on supporting/tertiary: --text-tertiary on
       --bg-canvas; --accent-violet-ink on --accent-violet-soft (per
       admin/src/styles.css:1044-1046); status *-text/*-bg pairs.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Surfaces — warm neutrals tinted toward the violet hue (280) */
  --bg-canvas:    oklch(98%  0.005 280);
  --bg-surface:   oklch(99.5% 0.003 280);
  --bg-elevated:  oklch(96%  0.007 280);
  --bg-sunken:    oklch(94%  0.008 280);

  /* Text */
  --text-primary:   oklch(22%  0.012 280);  /* AAA on bg-canvas + bg-surface */
  --text-secondary: oklch(45%  0.012 280);  /* AAA on bg-canvas */
  --text-tertiary:  oklch(52%  0.012 280);  /* AA only — supporting text */
  --text-inverse:   oklch(98%  0.003 280);

  /* Borders */
  --border:        oklch(88%  0.008 280);
  --border-soft:   oklch(93%  0.006 280);
  --border-strong: oklch(76%  0.012 280);

  /* Identity accent — Toledo violet (load-bearing for the v2 hero) */
  --accent-violet:        oklch(48% 0.14 300);
  --accent-violet-hover:  oklch(42% 0.14 300);
  --accent-violet-deep:   oklch(34% 0.13 300);  /* hero background */
  --accent-violet-deeper: oklch(26% 0.10 300);  /* hero gradient depth */
  --accent-violet-soft:   oklch(95% 0.025 300);
  --accent-violet-muted:  oklch(88% 0.045 300);
  --accent-violet-ink:    oklch(34% 0.12 300);  /* AA on violet-soft */
  --accent-violet-on-deep: oklch(85% 0.08 300); /* readable on violet-deep */

  /* Primary action — civic green (per PRODUCT.md proportion rule:
     never side-by-side with violet at equal weight) */
  --action-green:        oklch(38% 0.060 165);
  --action-green-hover:  oklch(32% 0.065 165);

  /* Spacing — 4pt scale, semantic */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;
  --space-5xl: 96px;
  --space-6xl: 128px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-full: 9999px;

  /* Typography stacks. System fallback FIRST so the page renders before
     the webfonts arrive. Big Shoulders Display is a civic-regional slab-
     shouldered grotesque (Patric King / Chicago Design Office), perfect
     for muni-signage lineage. Not on PRODUCT.md's reject list. */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', sans-serif;
  --font-display: Impact, 'Arial Black', 'Helvetica Neue', sans-serif;

  /* Transitions — exponential ease-out */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --transition-fast:   0.12s var(--ease-out-quart);
  --transition-normal: 0.2s  var(--ease-out-quart);
  --transition-slow:   0.32s var(--ease-out-quart);
}

/* Once the webfonts arrive, prefer them. The system fallback above
   remains the FOIT-free default; this swap is invisible if the network
   request fails. */
@supports (font-variation-settings: normal) {
  :root {
    --font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --font-display: 'Big Shoulders Display', Impact, 'Arial Black',
                    'Helvetica Neue', sans-serif;
  }
}