:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text: var(--font);
  --mavroon: #492f24;
  --mavroon-dark: #362219;
  --mavroon-dim: rgba(73,47,36,.08);
  --mavroon-border: rgba(73,47,36,.24);
  --brand-hover: #624336;
  --gold: #ffc425;
  --gold-dark: #492f24;
  --gold-dim: rgba(255,196,37,.15);
  --google: #ffc425;
  --google-dark: #492f24;
  --meta: #492f24;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f1f1f2;
  --surface-3: #ececee;
  --surface-4: #dcdddf;
  --text: #2c2a29;
  --text-secondary: #46413e;
  --text-muted: #62584f;
  --text-disabled: #62584f;
  --border: rgba(44,42,41,.22);
  --border-subtle: rgba(0,0,0,.08);
  --border-strong: rgba(44,42,41,.28);
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 18px;
  --r-pill: 980px;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.08);
  --shadow-sm: 0 4px 12px rgba(0,0,0,.10);
  --shadow-md: 0 8px 24px rgba(26,26,26,.12);
  --shadow-card: 0 4px 24px rgba(26,26,26,.08);
  --shadow-pop: 0 12px 32px rgba(26,26,26,.18);
  --content-wide: 1200px;
  --shell-gutter: 24px;
  --duration-fast: 200ms;
  --duration-base: 300ms;
  --ease-out: cubic-bezier(.28,.11,.32,1);
  --admin-bg: #f1f1f2;
  --admin-surface: #ffffff;
  --admin-border: rgba(44,42,41,.18);
  --admin-mono:var(--font-text);

  --status-good:#176635; --status-warn:#765000; --status-bad:#9e2f24;
  --series-secondary:#886b43;
  --demo-1:#492f24; --demo-2:#886b43; --demo-3:#b49b72; --demo-4:#d7c3a2; --demo-5:#62584f; --demo-6:#ececee;
  --tooltip-bg:rgba(255,255,255,.97); --scrim:rgba(44,42,41,.45); --band-rule:rgba(255,255,255,.38);
  --radius-8:8px; --radius-12:12px; --radius-18:18px; --radius-track:9px; --radius-segment:7px;
  --type-11:11px; --type-12:12px; --type-13:13px; --type-14:14px; --type-15:15px; --type-18:18px; --type-24:24px; --type-28:28px;
}

:root {
  --mavroon-mid:var(--mavroon-dim);
  --gold-earned-glow:var(--gold-dim);
  --stale-amber:var(--status-warn);
  --stale-amber-dim:var(--gold-dim);
  --google-dim:var(--gold-dim);
  --google-border:var(--gold-dim);
  --meta-dim:var(--mavroon-dim);
  --meta-border:var(--mavroon-border);
  --journey-event:var(--text-secondary);
  --journey-event-dark:var(--text-secondary);
  --journey-event-dim:var(--mavroon-dim);
  --danger:var(--status-bad);
  --danger-dim:var(--mavroon-dim);
  --shadow-lg:var(--shadow-md);
  --shadow-lift:var(--shadow-md);
  --mono:var(--font-text);
  --text-hero:var(--type-28);
  --text-primary-kpi:var(--type-28);
  --text-secondary-kpi:var(--type-24);
  --text-body:var(--type-14);
  --text-caption:var(--type-12);
  --text-micro:var(--type-11);
  --ease-in-out:cubic-bezier(0.4, 0, 0.2, 1);
  --wipe-ease:cubic-bezier(0.65, 0, 0.35, 1);
  --duration-slow:300ms;
  --wipe-duration:200ms;
  --scale:var(--status-good);
  --scale-dim:var(--mavroon-dim);
  --monitor:var(--status-warn);
  --monitor-dim:var(--gold-dim);
  --test:var(--text-secondary);
  --test-dim:var(--mavroon-dim);
  --pause:var(--status-bad);
  --pause-dim:var(--mavroon-dim);
  --neutral:var(--text-muted);
  --neutral-dim:var(--border-subtle);
}
@media(max-width:680px) { :root { --shell-gutter:16px; } }