:root {

    --bg:            #f4f8fd;
    --surface:       #ffffff;
    --surface-2:     #f8fafc;
    --surface-3:     #f1f5f9;
    --surface-accent:#eff6ff;

    --border:        #e2e8f0;
    --border-soft:   #f1f5f9;
    --border-strong: #cbd5e1;

    --text:          #0f172a;
    --text-2:        #334155;
    --text-dim:      #64748b;
    --text-faint:    #94a3b8;

    --accent:        #2563eb;
    --accent-hover:  #1d4ed8;
    --accent-soft:   #eff6ff;

    --ok:            #059669;
    --ok-soft:       #dcfce7;
    --ok-border:     #bbf7d0;
    --ok-strong:     #166534;
    --danger:        #dc2626;
    --danger-soft:   #fef2f2;
    --danger-border: #fecaca;
    --warn:          #d97706;
    --warn-soft:     #fffbeb;
    --warn-border:   #fde68a;
    --warn-strong:   #92400e;
    --accent-border: #bfdbfe;
    --violet:        #7c3aed;
    --violet-soft:   #f5f3ff;

    --panel:         #eef4ff;
    --panel-2:       #f5f3ff;

    --skel-shine:    rgba(255, 255, 255, .85);

    --logo-x:        linear-gradient(145deg, #5aa9ff 0%, #1f6bfb 46%, #0a3fe0 100%);

    --theme-switch:  .18s ease;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:            #0d1219;
        --surface:       #151b25;
        --surface-2:     #1b222e;
        --surface-3:     #212936;
        --surface-accent:#16233d;

        --border:        #2a3240;
        --border-soft:   #222936;
        --border-strong: #3a4455;

        --text:          #e9edf4;
        --text-2:        #c2cbd9;
        --text-dim:      #94a1b5;
        --text-faint:    #6d7a8e;

        --accent:        #4d8dff;
        --accent-hover:  #6ba0ff;
        --accent-soft:   #16233d;

        --ok:            #34d399;
        --ok-soft:       #12291f;
        --ok-border:     #1d4d38;
        --ok-strong:     #6ee7b7;
        --danger:        #f87171;
        --danger-soft:   #2a1618;
        --danger-border: #4d2124;
        --warn:          #fbbf24;
        --warn-soft:     #2a2212;
        --warn-border:   #4a3a16;
        --warn-strong:   #fcd34d;
        --accent-border: #2c4a7a;
        --violet:        #a78bfa;
        --violet-soft:   #221a3a;

        --panel:         #1e2a3f;
        --panel-2:       #262040;

        --skel-shine:    rgba(255, 255, 255, .07);
    }
}

:root[data-theme="dark"] {
    --bg:            #0d1219;
    --surface:       #151b25;
    --surface-2:     #1b222e;
    --surface-3:     #212936;
    --surface-accent:#16233d;

    --border:        #2a3240;
    --border-soft:   #222936;
    --border-strong: #3a4455;

    --text:          #e9edf4;
    --text-2:        #c2cbd9;
    --text-dim:      #94a1b5;
    --text-faint:    #6d7a8e;

    --accent:        #4d8dff;
    --accent-hover:  #6ba0ff;
    --accent-soft:   #16233d;

    --ok:            #34d399;
    --ok-soft:       #12291f;
    --ok-border:     #1d4d38;
    --ok-strong:     #6ee7b7;
    --danger:        #f87171;
    --danger-soft:   #2a1618;
    --danger-border: #4d2124;
    --warn:          #fbbf24;
    --warn-soft:     #2a2212;
    --warn-border:   #4a3a16;
    --warn-strong:   #fcd34d;
    --accent-border: #2c4a7a;
    --violet:        #a78bfa;
    --violet-soft:   #221a3a;

    --panel:         #1e2a3f;
    --panel-2:       #262040;

    --skel-shine:    rgba(255, 255, 255, .07);
}

:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { color-scheme: dark; }
}

:root {

    --fs-xs:   11px;
    --fs-sm:   12px;
    --fs-base: 14px;
    --fs-md:   16px;
    --fs-lg:   20px;
    --fs-xl:   26px;
    --fs-2xl:  34px;

    --lh-tight: 1.2;
    --lh-base:  1.5;

    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-8:  32px;
    --sp-10: 40px;
    --sp-12: 48px;

    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-pill: 999px;

    --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06),
                0 1px 3px rgba(15, 23, 42, 0.08);
    --shadow-2: 0 4px 12px rgba(15, 23, 42, 0.08),
                0 2px 4px rgba(15, 23, 42, 0.06);
    --shadow-3: 0 12px 32px rgba(15, 23, 42, 0.14),
                0 4px 8px rgba(15, 23, 42, 0.08);

    --shadow-accent: 0 6px 20px rgba(37, 99, 235, 0.28);
}

:root[data-theme="dark"] {
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --shadow-2: 0 6px 16px rgba(0, 0, 0, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --shadow-3: 0 16px 40px rgba(0, 0, 0, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --shadow-accent: 0 6px 20px rgba(37, 99, 235, 0.45);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4),
                    inset 0 1px 0 rgba(255, 255, 255, 0.04);
        --shadow-2: 0 6px 16px rgba(0, 0, 0, 0.45),
                    inset 0 1px 0 rgba(255, 255, 255, 0.05);
        --shadow-3: 0 16px 40px rgba(0, 0, 0, 0.55),
                    inset 0 1px 0 rgba(255, 255, 255, 0.06);
        --shadow-accent: 0 6px 20px rgba(37, 99, 235, 0.45);
    }
}