:root {
    --font-display: "Unbounded", system-ui, sans-serif;
    --font-brand: "Russo One", system-ui, sans-serif;
    --font-accent: "Fugaz One", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --pill: 999px;
    --radius-lg: 26px;
    --radius-md: 18px;
    --radius-sm: 12px;

    --nav-height: 54px;
    --page-max: 1120px;
    --ease: cubic-bezier(0.4, 0.14, 0.3, 1);

    --bg: #eef0ea;
    --surface: #ffffff;
    --surface-sunken: #f5f6f2;
    --nav: rgba(233, 235, 224, 0.86);
    --line: #dfe2d8;
    --line-strong: #c9cdbe;

    --ink: #1b1f1c;
    --ink-muted: #6b716a;
    --on-accent: #ffffff;

    --tab-bg: #1b1f1c;
    --tab-ink: #ffffff;

    --accent: #159c4a;
    --accent-strong: #0f7d3a;
    --accent-soft: #dff3e4;
    --danger: #c33b3b;
    --danger-soft: #fbe6e6;
    --warn: #a86416;
    --warn-soft: #fdf0d9;
    --ok: #15803d;
    --ok-soft: #dcfce7;

    --shadow-nav: 0 6px 24px rgba(20, 28, 20, 0.10);
    --shadow-card: 0 2px 10px rgba(20, 28, 20, 0.05);
    --shadow-pop: 0 10px 30px rgba(20, 28, 20, 0.14);
    --shadow-float: 0 3px 14px rgba(20, 28, 20, 0.22);
    --shadow-stack: -10px 0 30px rgba(20, 28, 20, 0.16);
    --scrim: rgba(20, 28, 20, 0.18);

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #14171a;
        --surface: #1b1f23;
        --surface-sunken: #23282d;
        --nav: rgba(27, 31, 35, 0.82);
        --line: #2c3238;
        --line-strong: #3d444b;

        --ink: #e7eae6;
        --ink-muted: #98a09a;
        --on-accent: #ffffff;

        --tab-bg: #e7eae6;
        --tab-ink: #14171a;

        --accent: #22b35d;
        --accent-strong: #2ac069;
        --accent-soft: #17311f;
        --danger: #e46a6a;
        --danger-soft: #33201f;
        --warn: #d79a4a;
        --warn-soft: #332714;
        --ok: #4ec27c;
        --ok-soft: #16301f;

        --shadow-nav: 0 6px 24px rgba(0, 0, 0, 0.45);
        --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.32);
        --shadow-pop: 0 10px 34px rgba(0, 0, 0, 0.52);
        --shadow-float: 0 3px 14px rgba(0, 0, 0, 0.55);
        --shadow-stack: -10px 0 30px rgba(0, 0, 0, 0.55);
        --scrim: rgba(0, 0, 0, 0.45);

        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --bg: #14171a;
    --surface: #1b1f23;
    --surface-sunken: #23282d;
    --nav: rgba(27, 31, 35, 0.82);
    --line: #2c3238;
    --line-strong: #3d444b;

    --ink: #e7eae6;
    --ink-muted: #98a09a;
    --on-accent: #ffffff;

    --tab-bg: #e7eae6;
    --tab-ink: #14171a;

    --accent: #22b35d;
    --accent-strong: #2ac069;
    --accent-soft: #17311f;
    --danger: #e46a6a;
    --danger-soft: #33201f;
    --warn: #d79a4a;
    --warn-soft: #332714;
    --ok: #4ec27c;
    --ok-soft: #16301f;

    --shadow-nav: 0 6px 24px rgba(0, 0, 0, 0.45);
    --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.32);
    --shadow-pop: 0 10px 34px rgba(0, 0, 0, 0.52);
    --shadow-float: 0 3px 14px rgba(0, 0, 0, 0.55);
    --shadow-stack: -10px 0 30px rgba(0, 0, 0, 0.55);
    --scrim: rgba(0, 0, 0, 0.45);

    color-scheme: dark;
}