/* Shared appearance tokens. System appearance also themes native date/select controls. */
:root {
    color-scheme: light dark;
    --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
    --font-xs: 11px;
    --font-caption: 12px;
    --font-small: 13px;
    --font-body: 14px;
    --font-title: 18px;
    --font-heading: clamp(27px, 2.5vw, 34px);
    --font-stat: 32px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius: 22px;
    --radius-lg: 28px;
    --radius-pill: 999px;
    --sidebar-width: 256px;
    --ease: cubic-bezier(.2, .8, .2, 1);
    --duration-fast: 160ms;
    --duration: 240ms;
    --glass-blur: 24px;
    --glass-saturation: 135%;
    --ink: #1d1d21;
    --text: #3d3d45;
    --muted: #686872;
    --faint: #757580;
    --canvas: #f3f4f7;
    --surface: #ffffff;
    --surface-subtle: #f8f9fb;
    --surface-hover: #eef0f5;
    --surface-inset: #e9ecf2;
    --line: rgba(25, 30, 45, .12);
    --line-soft: rgba(25, 30, 45, .075);
    --line-strong: rgba(25, 30, 45, .23);
    --glass: #f7f8fa;
    --glass-sidebar: #edf0f6;
    --glass-popup: #fcfcfe;
    --glass-highlight: rgba(255, 255, 255, .86);
    --sidebar: var(--glass-sidebar);
    --accent-rgb: 0 102 214;
    --shadow-rgb: 24 34 56;
    --brand-900: #003b83;
    --brand-800: #0055b5;
    --brand-700: #0066d6;
    --brand-600: #0066d6;
    --brand-500: #1479e8;
    --brand-100: #dfedff;
    --brand-50: #eef5ff;
    --blue: #0066d6;
    --blue-100: #eaf3ff;
    --green: #197345;
    --green-100: #e9f6ee;
    --amber: #926007;
    --amber-100: #fff4df;
    --purple: #7152b9;
    --purple-100: #f1edfb;
    --red: #c43139;
    --red-100: #fff0f1;
    --slate: #606875;
    --on-accent: #ffffff;
    --avatar: #466aab;
    --avatar-teal: #23766d;
    --avatar-purple: #7957b2;
    --avatar-orange: #aa612f;
    --avatar-pink: #a74d73;
    --avatar-green: #33764c;
    --scrim: rgba(17, 23, 36, .35);
    --auth-background: #18283f;
    --auth-text: #f4f7fc;
    --auth-muted: #bbc9dd;
    --auth-accent: #b4d7ff;
    --auth-line: rgba(255, 255, 255, .14);
    --auth-tile: rgba(255, 255, 255, .055);
    --motif-line: rgba(44, 62, 83, .09);
    --motif-opacity: .07;
    --motif-filter: brightness(0);
    --sidebar-motif-opacity: .075;
    --logo-background: #25324796;
    --shadow-sm: 0 2px 5px rgb(var(--shadow-rgb) / .025), 0 8px 24px rgb(var(--shadow-rgb) / .035), inset 0 1px 0 var(--glass-highlight);
    --shadow-md: 0 12px 40px rgb(var(--shadow-rgb) / .1), 0 2px 8px rgb(var(--shadow-rgb) / .04);
    --shadow-lg: 0 24px 80px rgb(var(--shadow-rgb) / .2), inset 0 1px 0 var(--glass-highlight);
    --focus-ring: 0 0 0 4px rgb(var(--accent-rgb) / .18);
    font-family: var(--font-system);
    font-synthesis: none;
    color: var(--text);
    background: var(--canvas);
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink: #f5f5f7;
        --text: #dedee5;
        --muted: #aaaab5;
        --faint: #9c9ca9;
        --canvas: #18191d;
        --surface: #24252b;
        --surface-subtle: #292b32;
        --surface-hover: #32353e;
        --surface-inset: #1f2127;
        --line: rgba(235, 239, 255, .12);
        --line-soft: rgba(235, 239, 255, .075);
        --line-strong: rgba(235, 239, 255, .27);
        --glass: #24262c;
        --glass-sidebar: #22252d;
        --glass-popup: #2c2e36;
        --glass-highlight: rgba(255, 255, 255, .055);
        --accent-rgb: 105 173 255;
        --shadow-rgb: 0 0 0;
        --brand-900: #b7d8ff;
        --brand-800: #005aba;
        --brand-700: #006bd9;
        --brand-600: #85bcff;
        --brand-500: #85bcff;
        --brand-100: #253e5f;
        --brand-50: #253247;
        --blue: #85bcff;
        --blue-100: #253247;
        --green: #83d5a5;
        --green-100: #243d31;
        --amber: #f1c174;
        --amber-100: #413627;
        --purple: #c6afff;
        --purple-100: #353047;
        --red: #ff959c;
        --red-100: #442c33;
        --slate: #b4bdcc;
        --avatar: #4267a5;
        --scrim: rgba(0, 0, 0, .6);
        --auth-background: #1c2a40;
        --motif-line: rgba(220, 232, 255, .09);
        --motif-opacity: .08;
        --motif-filter: brightness(1);
        --sidebar-motif-opacity: .085;
        --shadow-sm: 0 2px 6px rgb(var(--shadow-rgb) / .08), 0 8px 24px rgb(var(--shadow-rgb) / .08), inset 0 1px 0 var(--glass-highlight);
        --shadow-md: 0 12px 40px rgb(var(--shadow-rgb) / .25), 0 2px 8px rgb(var(--shadow-rgb) / .15);
        --shadow-lg: 0 24px 80px rgb(var(--shadow-rgb) / .45), inset 0 1px 0 var(--glass-highlight);
    }
}

/* Opaque tokens above are the fallback when backdrop filtering isn't available. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root {
        --glass: rgba(248, 249, 252, .84);
        --glass-sidebar: rgba(237, 240, 247, .84);
        --glass-popup: rgba(255, 255, 255, .94);
    }
    @media (prefers-color-scheme: dark) {
        :root {
            --glass: rgba(35, 37, 44, .88);
            --glass-sidebar: rgba(32, 35, 43, .88);
            --glass-popup: rgba(43, 45, 54, .96);
        }
    }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    :root {
        --glass: var(--surface);
        --glass-sidebar: var(--surface-subtle);
        --glass-popup: var(--surface);
        --glass-blur: 0px;
        --glass-saturation: 100%;
    }
}

@media (prefers-contrast: more) {
    :root { --line: var(--line-strong); --line-soft: var(--line-strong); }
}