@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/Inter-Regular.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0100-017F, U+0218-021B;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/Inter-Medium.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0100-017F, U+0218-021B;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/Inter-SemiBold.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0100-017F, U+0218-021B;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/Inter-Bold.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0100-017F, U+0218-021B;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0100-017F, U+0218-021B;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/JetBrainsMono-Medium.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0100-017F, U+0218-021B;
}

:root {
    --brand-ink:        #0F141B;
    --brand-paper:      #FFFFFF;
    --brand-accent:     #1D4ED8;
    --brand-accent-on:  #FFFFFF;

    --bg:               var(--brand-paper);
    --bg-soft:          #F7F8FA;
    --bg-elevated:      #FBFCFD;
    --bg-hover:         #F1F3F6;
    --bg-active:        #E9ECF1;
    --bg-overlay:       rgba(15, 20, 27, 0.5);

    --fg:               var(--brand-ink);
    --fg-muted:         #4F5A6B;
    --fg-dim:           #828B9A;
    --fg-inverse:       #FFFFFF;

    --line:             #E6E9EE;
    --line-strong:      #CDD3DC;
    --line-soft:        #F0F2F5;

    --accent:           var(--brand-accent);
    --accent-hover:     #1E40AF;
    --accent-active:    #1E3A8A;
    --accent-soft:      #EEF3FE;
    --accent-on:        var(--brand-accent-on);

    --success:          #16A34A;
    --success-soft:     #DCFCE7;
    --warning:          #D97706;
    --warning-soft:     #FEF3C7;
    --danger:           #DC2626;
    --danger-soft:      #FEE2E2;
    --info:             #2563EB;
    --info-soft:        #DBEAFE;

    color-scheme: light;

    --ff-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;
    --ff-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

    --fs-xs:   0.75rem;
    --fs-sm:   0.8125rem;
    --fs-md:   0.875rem;
    --fs-base: 0.9375rem;
    --fs-lg:   1rem;
    --fs-xl:   1.125rem;
    --fs-2xl:  1.375rem;
    --fs-3xl:  1.75rem;
    --fs-4xl:  2.25rem;
    --fs-5xl:  3rem;

    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    --lh-tight:   1.05;
    --lh-snug:    1.25;
    --lh-base:    1.5;
    --lh-relaxed: 1.65;

    --ls-tight: -0.02em;
    --ls-snug:  -0.01em;
    --ls-base:  0;
    --ls-wide:  0.04em;
    --ls-wider: 0.08em;
    --ls-mono:  0.12em;

    --sp-0:  0;
    --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;
    --sp-16: 64px;
    --sp-20: 80px;
    --sp-24: 96px;

    --r-xs:   3px;
    --r-sm:   5px;
    --r-md:   6px;
    --r-lg:   8px;
    --r-xl:   12px;
    --r-2xl:  16px;
    --r-pill: 999px;

    --sh-xs:    0 1px 2px rgba(15, 20, 27, 0.04);
    --sh-sm:    0 1px 3px rgba(15, 20, 27, 0.06), 0 1px 2px rgba(15, 20, 27, 0.04);
    --sh-md:    0 4px 12px rgba(15, 20, 27, 0.06), 0 2px 4px rgba(15, 20, 27, 0.04);
    --sh-lg:    0 12px 32px rgba(15, 20, 27, 0.08), 0 4px 12px rgba(15, 20, 27, 0.05);
    --sh-focus: 0 0 0 3px rgba(29, 78, 216, 0.18);
    --sh-focus-danger: 0 0 0 3px rgba(220, 38, 38, 0.18);

    --t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-base: 180ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-slow: 280ms cubic-bezier(0.4, 0, 0.2, 1);

    --sidebar-w:           240px;
    --sidebar-w-collapsed: 56px;
    --topbar-h:            56px;
    --content-max:         1440px;
    --content-pad-x:       clamp(16px, 2vw, 28px);
    --content-pad-y:       clamp(16px, 1.5vw, 24px);

    --bp-sm:  560px;
    --bp-md:  768px;
    --bp-lg:  1024px;
    --bp-xl:  1280px;

    --z-base:    1;
    --z-sidebar: 30;
    --z-topbar:  20;
    --z-overlay: 50;
    --z-modal:   100;
    --z-toast:   200;
}

[data-theme="dark"] {
    --bg:               #0B0F15;
    --bg-soft:          #11161F;
    --bg-elevated:      #161C27;
    --bg-hover:         #1A2230;
    --bg-active:        #1F2733;
    --bg-overlay:       rgba(0, 0, 0, 0.6);

    --fg:               #F4F5F7;
    --fg-muted:         #A8B0BD;
    --fg-dim:           #6F7787;
    --fg-inverse:       #0F141B;

    --line:             #1F2733;
    --line-strong:      #2A3340;
    --line-soft:        #161C27;

    --accent:           #4B7BF5;
    --accent-hover:     #6692FB;
    --accent-active:    #3B6BEB;
    --accent-soft:      rgba(75, 123, 245, 0.12);
    --accent-on:        #FFFFFF;

    --success:          #4ADE80;
    --success-soft:     rgba(74, 222, 128, 0.12);
    --warning:          #FBBF24;
    --warning-soft:     rgba(251, 191, 36, 0.12);
    --danger:           #F87171;
    --danger-soft:      rgba(248, 113, 113, 0.12);
    --info:             #60A5FA;
    --info-soft:        rgba(96, 165, 250, 0.12);

    --sh-xs:    0 1px 2px rgba(0, 0, 0, 0.3);
    --sh-sm:    0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
    --sh-md:    0 4px 12px rgba(0, 0, 0, 0.4);
    --sh-lg:    0 12px 32px rgba(0, 0, 0, 0.5);

    color-scheme: dark;
}