/* ═══════════════════════════════════════════════════════════════════════
   SurveyEngine — Design Tokens
   Source of truth: The Harmony Code brand palette (prototype v2)
═══════════════════════════════════════════════════════════════════════ */

/* ─── Design Tokens ─────────────────────────────────────────────────── */
:root {
    /* Surfaces — warm ivory, matching The Harmony Code brand */
    --bg: #F9F6F0;
    --surface: #FFFFFF;
    --surface-alt: #EDF1EC;
    /* Typography — deep forest ink */
    --ink: #2D3E35;
    --ink-muted: #707F75;
    /* Accent — terracotta coral (primary brand color) */
    --accent: #E07A5F;
    --accent-hover: #C2604A;
    --accent-soft: #FBEAE4;
    --accent-mid: #F0B8A2;
    --logo-outline-gold: #C9A961; /* client request 2026-07: sign-in logo outline changed from soft peach to gold */
    /* FIX (Phase 3 CSS/a11y review 2026-07): --accent and --accent-hover are correct for
       borders, backgrounds, and any other non-text use, but neither one hits WCAG AA's 4.5:1
       text-contrast minimum for white button text (measured 2.95:1 and 4.15:1 respectively) —
       .btn-primary's 14px/600-weight label doesn't qualify for the 3:1 "large text" exemption.
       These two tokens are the same terracotta hue, darkened just enough to clear 4.5:1 with
       white text, and are only for fills that carry white/light text on top (buttons, filled
       badges) — everywhere else should keep using --accent / --accent-hover as-is. */
    --accent-btn: #C84927; /* 4.73:1 vs white */
    --accent-btn-hover: #A03A1F; /* 6.73:1 vs white */
    /* Secondary accent — sage green (brand secondary) */
    --accent2: #7C9B5E;
    --accent2-hover: #688450;
    --accent2-soft: #EAEFE0;
    --accent2-mid: #C7D4B3;
    /* Borders & lines */
    --line: #E4DECF;
    /* Warning / error — muted brick red, kept distinct from accent */
    --warn: #B23B2E;
    --warn-soft: #F9E1DB;
    --warn-mid: #E0A99B;
    /* Success — brand sage green */
    --success: #6F8F52;
    --success-soft: #EEF2E5;
    --success-mid: #C9D6B0;
    /* Elevation — border-only cards, no double shadows */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --shadow-sm: 0 1px 2px rgba(45,62,53,0.06);
    --shadow-md: 0 4px 12px rgba(45,62,53,0.09);
    --shadow-lg: 0 8px 28px rgba(45,62,53,0.12);
    /* Spacing scale — used throughout Admin page inline styles */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    /* Accessibility — minimum interactive target size */
    --touch-target: 44px;
    /* Typography */
    --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;
    --transition: 0.16s cubic-bezier(0.4, 0, 0.2, 1);
}