:root {
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;

    --r-xs: 8px;
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-xl: 28px;
    --r-pill: 999px;

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;
    --font-num: "SF Mono", "JetBrains Mono", "Roboto Mono", ui-monospace, monospace;
    --t-display: 300 34px/1.15 var(--font);
    --t-h1: 400 26px/1.2 var(--font);
    --t-h2: 500 19px/1.3 var(--font);
    --t-h3: 600 15px/1.35 var(--font);
    --t-body: 400 15px/1.5 var(--font);
    --t-sm: 400 13px/1.45 var(--font);
    --t-xs: 500 11px/1.3 var(--font);

    --header-h: 68px;
    --sidebar-w: 320px;
    --page-max: 1440px;
    --tabbar-h: 62px;

    --ease: cubic-bezier(.2, .7, .3, 1);
    --fast: .14s var(--ease);
    --norm: .22s var(--ease);
}

:root {
    --bg: #F1F0EC;
    --bg-deep: #E7E5DF;
    --surface: #FFFFFF;
    --surface-float: #FFFFFF;
    --surface-2: #F6F5F2;
    --surface-3: #EBE9E4;
    --surface-inset: #F2F1ED;

    --text: #17171A;
    --text-2: #55555C;
    --text-muted: #6A6A73;
    --text-on-accent: #FFFFFF;

    --border: rgba(23, 23, 26, .09);
    --border-strong: rgba(23, 23, 26, .16);

    --accent: #0E7C6B;
    --accent-hover: #0C6E5F;
    --accent-soft: rgba(14, 124, 107, .10);
    --accent-text: #0B6355;

    --pill: #17171A;
    --pill-text: #FFFFFF;
    --pill-hover: #2C2C31;

    --ok: #17795A;
    --ok-soft: rgba(23, 121, 90, .12);
    --warn: #9A6314;
    --warn-soft: rgba(154, 99, 20, .13);
    --err: #A83A2C;
    --err-soft: rgba(168, 58, 44, .12);

    --shadow-1: 0 1px 2px rgba(24, 22, 18, .04), 0 4px 12px rgba(24, 22, 18, .05);
    --shadow-2: 0 2px 6px rgba(24, 22, 18, .06), 0 14px 34px rgba(24, 22, 18, .08);
    --shadow-3: 0 8px 20px rgba(24, 22, 18, .10), 0 30px 60px rgba(24, 22, 18, .14);

    --overlay: rgba(28, 26, 22, .38);
    --skeleton: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%);
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #171310;
        --bg-deep: #100D0B;
        --surface: rgba(76, 66, 58, .40);
        --surface-float: #2E2724;
        --surface-2: rgba(96, 84, 74, .28);
        --surface-3: rgba(120, 106, 94, .22);
        --surface-inset: rgba(20, 17, 14, .45);

        --text: #F3EEE8;
        --text-2: #C6BCB1;
        --text-muted: #A89C90;
        --text-on-accent: #08201C;

        --border: rgba(255, 248, 240, .10);
        --border-strong: rgba(255, 248, 240, .20);

        --accent: #3FBFA9;
        --accent-hover: #55CDB8;
        --accent-soft: rgba(63, 191, 169, .14);
        --accent-text: #6FD9C6;

        --pill: #F3EEE8;
        --pill-text: #1A1512;
        --pill-hover: #FFFFFF;

        --ok: #4FC08D;
        --ok-soft: rgba(79, 192, 141, .14);
        --warn: #E0A64B;
        --warn-soft: rgba(224, 166, 75, .14);
        --err: #E5806E;
        --err-soft: rgba(229, 128, 110, .14);

        --shadow-1: 0 1px 2px rgba(0, 0, 0, .30), 0 6px 16px rgba(0, 0, 0, .28);
        --shadow-2: 0 4px 12px rgba(0, 0, 0, .34), 0 18px 40px rgba(0, 0, 0, .40);
        --shadow-3: 0 10px 26px rgba(0, 0, 0, .42), 0 34px 70px rgba(0, 0, 0, .52);

        --overlay: rgba(8, 6, 5, .60);
        --skeleton: linear-gradient(90deg, rgba(120,106,94,.16) 25%, rgba(120,106,94,.28) 50%, rgba(120,106,94,.16) 75%);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --bg: #171310;
    --bg-deep: #100D0B;
    --surface: rgba(76, 66, 58, .40);
    --surface-float: #2E2724;
    --surface-2: rgba(96, 84, 74, .28);
    --surface-3: rgba(120, 106, 94, .22);
    --surface-inset: rgba(20, 17, 14, .45);

    --text: #F3EEE8;
    --text-2: #C6BCB1;
    --text-muted: #A89C90;
    --text-on-accent: #08201C;

    --border: rgba(255, 248, 240, .10);
    --border-strong: rgba(255, 248, 240, .20);

    --accent: #3FBFA9;
    --accent-hover: #55CDB8;
    --accent-soft: rgba(63, 191, 169, .14);
    --accent-text: #6FD9C6;

    --pill: #F3EEE8;
    --pill-text: #1A1512;
    --pill-hover: #FFFFFF;

    --ok: #4FC08D;
    --ok-soft: rgba(79, 192, 141, .14);
    --warn: #E0A64B;
    --warn-soft: rgba(224, 166, 75, .14);
    --err: #E5806E;
    --err-soft: rgba(229, 128, 110, .14);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .30), 0 6px 16px rgba(0, 0, 0, .28);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, .34), 0 18px 40px rgba(0, 0, 0, .40);
    --shadow-3: 0 10px 26px rgba(0, 0, 0, .42), 0 34px 70px rgba(0, 0, 0, .52);

    --overlay: rgba(8, 6, 5, .60);
    --skeleton: linear-gradient(90deg, rgba(120,106,94,.16) 25%, rgba(120,106,94,.28) 50%, rgba(120,106,94,.16) 75%);
    color-scheme: dark;
}