/*
 * Design tokens — single source of truth for color, radius, shadow, font.
 * Theme-dependent variables are redefined for dark mode below;
 */

:root {
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --radius-sm: 0.4em;
    --radius-md: 0.6em;
    --radius-lg: 1em;

    /* fixed brand teal, used where a color must stay constant regardless of
       theme (e.g. printed/exported documents) */
    --brand: #094752;
    --brand-contrast: #ffffff;

    --bg: #fafbfb;
    --surface: #ffffff;
    --surface-2: #f2f4f4;
    --border: #dfe4e3;
    --border-strong: #c7cecd;

    --text: #171a1a;
    --text-muted: #5d6666;
    --text-faint: #8b9392;

    --accent: #0f6f66;
    --accent-hover: #0c5951;
    --accent-active: #094039;
    --accent-soft: #d9efec;
    --accent-contrast: #ffffff;

    --success: #1a8a4a;
    --success-hover: #146b3a;
    --success-soft: #e1f5e6;

    --danger: #ae5547;
    --danger-hover: #91473b;
    --danger-soft: #fbe6e3;

    --warning: #b5790a;
    --warning-hover: #935f07;
    --warning-soft: #fbeed7;

    --overlay: rgba(15, 20, 20, 0.45);
    --shadow-sm: 0 1px 2px rgba(20, 30, 29, .05), 0 2px 8px rgba(20, 30, 29, .06);
    --shadow-md: 0 4px 16px rgba(20, 30, 29, .10), 0 1px 3px rgba(20, 30, 29, .08);

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #14181a;
        --surface: #1b2022;
        --surface-2: #202627;
        --border: #2b3234;
        --border-strong: #3b4446;

        --text: #e7ecec;
        --text-muted: #98a3a3;
        --text-faint: #647070;

        --accent: #3ab5a5;
        --accent-hover: #4fc4b4;
        --accent-active: #2c9a8c;
        --accent-soft: rgba(58, 181, 165, .16);
        --accent-contrast: #08211e;

        --success: #4fd07a;
        --success-hover: #66d98d;
        --success-soft: rgba(79, 208, 122, .14);

        --danger: #e2685c;
        --danger-hover: #e87f74;
        --danger-soft: rgba(226, 104, 92, .14);

        --warning: #e0a83f;
        --warning-hover: #e6b658;
        --warning-soft: rgba(224, 168, 63, .14);

        --overlay: rgba(0, 0, 0, 0.6);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .25);
        --shadow-md: 0 8px 24px rgba(0, 0, 0, .4), 0 2px 6px rgba(0, 0, 0, .3);

        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --bg: #14181a;
    --surface: #1b2022;
    --surface-2: #202627;
    --border: #2b3234;
    --border-strong: #3b4446;

    --text: #e7ecec;
    --text-muted: #98a3a3;
    --text-faint: #647070;

    --accent: #3ab5a5;
    --accent-hover: #4fc4b4;
    --accent-active: #2c9a8c;
    --accent-soft: rgba(58, 181, 165, .16);
    --accent-contrast: #08211e;

    --success: #4fd07a;
    --success-hover: #66d98d;
    --success-soft: rgba(79, 208, 122, .14);

    --danger: #e2685c;
    --danger-hover: #e87f74;
    --danger-soft: rgba(226, 104, 92, .14);

    --warning: #e0a83f;
    --warning-hover: #e6b658;
    --warning-soft: rgba(224, 168, 63, .14);

    --overlay: rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .25);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .4), 0 2px 6px rgba(0, 0, 0, .3);

    color-scheme: dark;
}