/* Hearth design tokens (tokens.json, synced from src/HOA.Client/wwwroot/css/hearth.css).
   Light is the default; dark applies with data-theme="dark", or with the system preference
   unless the visitor chose light. landing/app/css/tokens.css is a copy of this file. */

:root {
    color-scheme: light;
    --bg: #eef2f3;
    --bg-2: #e5ebed;
    --surface: #ffffff;
    --surface-2: #f5f8f8;
    --border: rgba(16, 44, 54, 0.11);
    --border-strong: #7d8e96;
    --ink: #17262d;
    --ink-2: #4f5f68;
    --ink-3: #57666d;
    --primary: #0e6b73;
    --primary-soft: rgba(14, 107, 115, 0.10);
    --primary-ink: #ffffff;
    --green: #267249;
    --green-soft: rgba(47, 143, 91, 0.12);
    --gold: #7f5f28;
    --gold-soft: rgba(166, 124, 52, 0.14);
    --danger: #aa412a;
    --danger-soft: rgba(192, 73, 47, 0.12);
    --chip-muted: rgba(16, 44, 54, 0.06);
    --live-on-primary: #8fe6b0;

    --shadow-sm: 0 1px 2px rgba(16, 40, 50, .06);
    --shadow: 0 2px 6px rgba(16, 40, 50, .06), 0 18px 40px -22px rgba(16, 40, 50, .42);
    --shadow-primary: 0 6px 18px -8px #0e6b73;
    --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #0e6b73;

    --font-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-editorial: 'Newsreader', Georgia, serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-10: 10px; --space-12: 12px;
    --space-16: 16px; --space-18: 18px; --space-20: 20px; --space-24: 24px; --space-30: 30px;
    --radius-6: 6px; --radius-8: 8px; --radius-10: 10px; --radius-11: 11px; --radius-12: 12px;
    --radius-14: 14px; --radius-18: 18px; --radius-20: 20px; --radius-pill: 999px;
    --content-max: 1200px;
    --control-height: 40px;
    --brand-tile: 38px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #0b1316;
        --bg-2: #0e181c;
        --surface: #13232a;
        --surface-2: #182a31;
        --border: rgba(255, 255, 255, 0.09);
        --border-strong: #5c747d;
        --ink: #e9f1f2;
        --ink-2: #9fb2b8;
        --ink-3: #91a2a7;
        --primary: #3ab5ae;
        --primary-soft: rgba(51, 179, 171, 0.16);
        --primary-ink: #0b1316;
        --green: #4fb87e;
        --green-soft: rgba(79, 184, 126, 0.15);
        --gold: #cda861;
        --gold-soft: rgba(205, 168, 97, 0.15);
        --danger: #e48471;
        --danger-soft: rgba(224, 113, 91, 0.16);
        --chip-muted: rgba(255, 255, 255, 0.07);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .32);
        --shadow: 0 2px 6px rgba(0, 0, 0, .4), 0 22px 48px -24px rgba(0, 0, 0, .7);
        --shadow-primary: 0 6px 18px -8px #33b3ab;
        --focus-ring: 0 0 0 2px #13232a, 0 0 0 4px #33b3ab;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b1316;
    --bg-2: #0e181c;
    --surface: #13232a;
    --surface-2: #182a31;
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: #5c747d;
    --ink: #e9f1f2;
    --ink-2: #9fb2b8;
    --ink-3: #91a2a7;
    --primary: #3ab5ae;
    --primary-soft: rgba(51, 179, 171, 0.16);
    --primary-ink: #0b1316;
    --green: #4fb87e;
    --green-soft: rgba(79, 184, 126, 0.15);
    --gold: #cda861;
    --gold-soft: rgba(205, 168, 97, 0.15);
    --danger: #e48471;
    --danger-soft: rgba(224, 113, 91, 0.16);
    --chip-muted: rgba(255, 255, 255, 0.07);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .32);
    --shadow: 0 2px 6px rgba(0, 0, 0, .4), 0 22px 48px -24px rgba(0, 0, 0, .7);
    --shadow-primary: 0 6px 18px -8px #33b3ab;
    --focus-ring: 0 0 0 2px #13232a, 0 0 0 4px #33b3ab;
}