/* Design tokens. Light is the default; dark follows the system setting. */
:root {
    color-scheme: light dark;

    --c-bg: #f6f4f1;
    --c-surface: #ffffff;
    --c-surface-hi: #f0ede8;
    --c-border: #e3ded6;
    --c-text: #1b1d22;
    --c-text-muted: #636874;
    --c-accent: #e85d10;
    --c-accent-soft: #fde7da;
    --c-on-accent: #ffffff;
    --c-live: #d61f3c;
    --c-live-soft: #fde3e7;
    --c-home: #e85d10;
    --c-away: #1f6fd1;
    --c-grid: #e8e4de;
    --c-skeleton: #ebe7e1;
    --c-skeleton-hi: #f7f5f2;
    --c-backdrop: rgb(20 18 16 / .45);

    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-num: ui-rounded, "SF Pro Rounded", system-ui, sans-serif;

    --s-1: .25rem;
    --s-2: .5rem;
    --s-3: .75rem;
    --s-4: 1rem;
    --s-5: 1.25rem;
    --s-6: 1.5rem;
    --s-8: 2rem;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-pill: 999px;
    --shadow-card: 0 1px 2px rgb(0 0 0 / .05), 0 4px 14px -6px rgb(0 0 0 / .12);
    --shadow-sheet: 0 -10px 40px -10px rgb(0 0 0 / .35);

    --dur-fast: 140ms;
    --dur-base: 240ms;
    --ease-out: cubic-bezier(.2, .8, .2, 1);
    --touch-min: 44px;
    --content-max: 44rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --c-bg: #121418;
        --c-surface: #1c1f25;
        --c-surface-hi: #262a32;
        --c-border: #2e333c;
        --c-text: #eef0f3;
        --c-text-muted: #9aa1ad;
        --c-accent: #ff7a2e;
        --c-accent-soft: #3a2316;
        --c-on-accent: #16120f;
        --c-live: #ff4d64;
        --c-live-soft: #3c1820;
        --c-home: #ff8a42;
        --c-away: #5aa2ff;
        --c-grid: #2a2e36;
        --c-skeleton: #23272e;
        --c-skeleton-hi: #2d323a;
        --c-backdrop: rgb(0 0 0 / .6);
        --shadow-card: 0 1px 2px rgb(0 0 0 / .4);
    }
}