/* ============================================================
   SNAPSHOT of app-demo design system (canonical: /app-demo/tokens.css)
   Copied 2026-08-31 for the marketing landing page — site/ deploys
   separately and must stay self-contained. Do not hand-edit here;
   re-snapshot from app-demo when the system moves.
   ============================================================ */
/* ============================================================
   Bundled Design System — tokens (three-tier, 2026-08-26)
   TIER 1  primitives — tone scales (generated), white, type, space,
           radius, shadow raws. Hold values, no meaning.
   TIER 2  semantic — hold intent; reference ONLY tier-1 tokens.
           Color semantics reference tone STEPS; anchors are
           generators only (Tate 2026-08-26).
   TIER 3  component — hold local UI decisions; reference ONLY
           tier-2 (naming: {component}-{variant}-{property}-{state},
           per Nathan Curtis / EightShapes + Anvil tier-3 practice).
   Tone-role logic (Material 3 + WCAG): text on white → tone ≤ 50;
   white text on solid → tone 40; glyphs/dots & interactive borders
   → tone 60 (≥3:1, WCAG 1.4.11); tints → 95; ink-on-tint → 30.
   ============================================================ */
:root {
  /* =================== TIER 1 — PRIMITIVES =================== */
  --white: #FFFFFF;

  --font-heading: 'Lora', Georgia, serif;
  --font-heading-weight: 700;
  --font-body: 'Satoshi', -apple-system, 'Segoe UI', sans-serif;

  --text-display: clamp(1.75rem, 1.1rem + 3vw, 2.5rem);
  --text-hero: clamp(2rem, 1.2rem + 3.6vw, 3rem);   /* marketing hero only — 2:1 against --text-h2 subtitle */
  --text-h1: clamp(1.5rem, 1.2rem + 1.4vw, 1.875rem);
  --text-h2: clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem);
  --text-h3: clamp(1rem, 0.95rem + 0.35vw, 1.125rem);
  --text-body: 16px;
  --text-small: 14px;
  --text-micro: 12px;
  --leading-heading: 1.2;
  --leading-body: 1.55;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;  --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;

  --radius-sm: 6px; --radius-md: 9px; --radius-lg: 12px; --radius-pill: 999px;

  --shadow-color: 42deg 12% 42%;
  --shadow-raised:
    0.3px 0.5px 0.6px hsl(var(--shadow-color) / 0.28),
    0.9px 1.7px 2.1px -0.9px hsl(var(--shadow-color) / 0.26),
    2.3px 4.4px 5.4px -1.8px hsl(var(--shadow-color) / 0.24),
    5.4px 10.6px 13px -2.7px hsl(var(--shadow-color) / 0.22);
  --shadow-overlay:
    0.3px 0.5px 0.6px hsl(var(--shadow-color) / 0.30),
    1.5px 2.9px 3.6px -0.6px hsl(var(--shadow-color) / 0.27),
    3.4px 6.6px 8.1px -1.2px hsl(var(--shadow-color) / 0.24),
    7px 13.7px 16.8px -1.9px hsl(var(--shadow-color) / 0.21),
    13.7px 26.7px 32.7px -2.5px hsl(var(--shadow-color) / 0.18);
  --border-hairline: 1px solid rgba(38, 36, 32, 0.06);

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;

  /* Anchors — GENERATORS ONLY for tools/generate-tones.py; never referenced.
     accent #5947AE · green #61A962 · gold #D9A514 · error #CC5B50 · ink-seed #262420 */
  --color-accent-anchor: #5947AE; --color-green-anchor: #61A962;
  --color-gold-anchor: #D9A514; --color-error-anchor: #CC5B50; --color-ink-anchor: #262420;

  /* =================== TIER 2 — SEMANTIC =================== */
  /* surfaces (Material: surface = neutral 99) */
  --color-page: var(--neutral-99);
  --color-card: var(--white);
  --color-wash: var(--neutral-95);

  /* text (all text ≥4.5:1 on white → tone ≤ 50) */
  --color-ink: var(--neutral-20);
  --color-ink-secondary: var(--neutral-40);
  --color-ink-muted: var(--neutral-50);

  /* lines (decorative 90; interactive borders 60 per WCAG 1.4.11) */
  --color-border: var(--neutral-90);
  --color-border-strong: var(--neutral-60);

  /* accent (Material primary = tone 40, white text guaranteed) */
  --color-accent: var(--accent-40);
  --color-accent-dark: var(--accent-30);
  --color-accent-tint: var(--accent-95);

  /* statuses — systematic roles: dot/glyph 60 · white-text solid 40 · tint 95 · on-tint ink 30 */
  --color-green: var(--green-60);
  --color-green-strong: var(--green-40);
  --color-green-tint: var(--green-95);
  --color-green-ink: var(--green-30);

  --color-gold: var(--gold-60);
  --color-star: var(--gold-70);        /* recorded exception: stars run warmer; value always paired with a numeral */
  --color-gold-tint: var(--gold-95);
  --color-gold-ink: var(--gold-30);

  --color-error: var(--error-60);
  --color-error-strong: var(--error-40);
  --color-error-tint: var(--error-95);
  --color-error-ink: var(--error-30);

  --color-focus: var(--accent-40);

  /* =================== TIER 3 — COMPONENT (first draft) =================== */
  /* button */
  --button-radius: var(--radius-md);
  --button-primary-bg: var(--color-accent);
  --button-primary-bg-hover: var(--color-accent-dark);
  --button-primary-fg: var(--color-card);
  --button-secondary-bg: var(--color-card);
  --button-secondary-fg: var(--color-ink);
  --button-secondary-border: var(--color-border-strong);
  --button-ghost-fg: var(--color-accent-dark);
  --button-ghost-bg-hover: var(--color-accent-tint);
  /* chip */
  --chip-radius: var(--radius-pill);
  --chip-bg: var(--color-wash);
  --chip-fg: var(--color-ink-secondary);
  --chip-border: var(--color-border);
  --chip-match-bg: var(--color-accent-tint);
  --chip-match-fg: var(--color-ink);
  /* badge */
  --badge-radius: var(--radius-sm);
  --badge-fg: var(--color-ink);
  --badge-positive-bg: var(--color-green-tint);
  --badge-positive-dot: var(--color-green);
  --badge-caution-bg: var(--color-gold-tint);
  --badge-caution-dot: var(--color-gold);
  --badge-negative-bg: var(--color-error-tint);
  --badge-negative-dot: var(--color-error);
  /* card — flat outline (Yelp-style, Tate 2026-08-26); shadows reserved for overlays */
  --card-bg: var(--color-card);
  --card-radius: var(--radius-lg);
  --card-shadow: none;
  --card-border: 1px solid var(--color-border);
  --panel-bg: var(--color-wash);
  /* input */
  --input-bg: var(--color-card);
  --input-border: var(--color-border-strong);
  --input-border-focus: var(--color-focus);
  --input-border-error: var(--color-error);
  --input-radius: var(--radius-md);
  /* avatar & stars */
  --avatar-bg: var(--color-accent-tint);
  --avatar-fg: var(--color-accent-dark);
  --tile-bg: var(--color-wash);
  --star-color: var(--color-star);
  /* stepper */
  --stepper-done-bg: var(--color-green-strong);
  --stepper-active-bg: var(--color-accent);

  /* ==== TONE SCALES — GENERATED by tools/generate-tones.py; do not hand-edit.
     Constant-hue OKLCH ladders from each family anchor, for darkening/
     lightening components ad hoc. Semantic tokens above stay authoritative
     for meaning; reach for a tone step only when no semantic token fits. ==== */
  /* accent · anchor #5947AE · hue 287° */
  --accent-99: #FBFBFF;
  --accent-95: #EDECFF;
  --accent-90: #DBDAFF;
  --accent-80: #B9B4FC;
  --accent-70: #998DF7;
  --accent-60: #7C6DD8;
  --accent-50: #6051B3;
  --accent-40: #453A84;
  --accent-30: #2C2458;
  --accent-20: #15102F;
  /* green · anchor #61A962 · hue 144° */
  --green-99: #FAFCFA;
  --green-95: #E7F2E6;
  --green-90: #CFE6CE;
  --green-80: #9ECC9D;
  --green-70: #6DB26D;
  --green-60: #4C934D;
  --green-50: #317434;
  --green-40: #215424;
  --green-30: #133715;
  --green-20: #061B07;
  /* gold · anchor #D9A514 · hue 85° */
  --gold-99: #FDFCF8;
  --gold-95: #F6EEDD;
  --gold-90: #EDDCBB;
  --gold-80: #DAB974;
  --gold-70: #C79600;
  --gold-60: #A97600;
  --gold-50: #885900;
  --gold-40: #634000;
  --gold-30: #412900;
  --gold-20: #221300;
  /* error · anchor #CC5B50 · hue 28° */
  --error-99: #FFFBFA;
  --error-95: #FEE9E6;
  --error-90: #FCD3CD;
  --error-80: #F4A79C;
  --error-70: #E9796D;
  --error-60: #C8584D;
  --error-50: #A43C34;
  --error-40: #782A24;
  --error-30: #501915;
  --error-20: #2A0A07;
  /* neutral · anchor #262420 · hue 85° */
  --neutral-99: #FCFCFB;
  --neutral-95: #F0EEEA;
  --neutral-90: #E1DED6;
  --neutral-80: #C4BDAE;
  --neutral-70: #A89D87;
  --neutral-60: #8A7F69;
  --neutral-50: #6C624E;
  --neutral-40: #4E4737;
  --neutral-30: #322D22;
  --neutral-20: #19160F;
}