@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Outfit:wght@500;600;700&display=swap");

:root {
    color-scheme: light;

    --font-sans: "Manrope", "Segoe UI", sans-serif;
    --font-display: "Outfit", "Segoe UI", sans-serif;

    --color-bg: #f4f7fb;
    --color-bg-subtle: #f8fafc;
    --color-bg-accent: rgba(59, 130, 246, 0.08);
    --color-surface: rgba(255, 255, 255, 0.96);
    --color-surface-soft: rgba(246, 249, 252, 0.94);
    --color-surface-inverse: #132033;
    --color-panel-bg: rgba(255, 255, 255, 0.98);
    --color-sidebar-bg: rgba(251, 252, 254, 0.98);
    --color-header-bg: rgba(255, 255, 255, 0.92);
    --color-icon-surface: rgba(235, 242, 251, 0.95);
    --color-border: rgba(217, 225, 235, 0.9);
    --color-border-strong: rgba(206, 216, 228, 0.95);
    --color-text: #31445c;
    --color-text-strong: #132033;
    --color-muted: #708198;
    --color-primary: #3157c7;
    --color-primary-soft: rgba(49, 87, 199, 0.1);
    --color-accent: #23a36c;
    --color-accent-soft: rgba(35, 163, 108, 0.08);

    --radius-sm: 0.75rem;
    --radius-md: 1rem;
    --radius-lg: 1.25rem;
    --radius-xl: 1.5rem;
    --radius-2xl: 1.75rem;
    --radius-full: 999px;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 2rem;
    --space-8: 2.5rem;

    --control-height-md: 2.7rem;
    --control-height-sm: 2.25rem;
    --control-padding-x: 0.8rem;
    --panel-padding: 1.15rem;
    --panel-radius: 1.45rem;
    --card-padding: 0.95rem;
    --card-radius: 0.95rem;

    --shadow-soft: 0 10px 24px rgba(15, 23, 42, 0.05);
    --shadow-panel: 0 20px 44px rgba(15, 23, 42, 0.18);

    --duration-fast: 160ms;
    --duration-normal: 240ms;
    --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
}

html[data-theme="dark"] {
    color-scheme: dark;

    --color-bg: #0b1320;
    --color-bg-subtle: #101a2a;
    --color-bg-accent: rgba(37, 99, 235, 0.18);
    --color-surface: rgba(17, 26, 42, 0.94);
    --color-surface-soft: rgba(24, 35, 56, 0.92);
    --color-surface-inverse: #ebf1f8;
    --color-panel-bg: rgba(15, 24, 39, 0.94);
    --color-sidebar-bg: rgba(11, 19, 32, 0.96);
    --color-header-bg: rgba(11, 19, 32, 0.88);
    --color-icon-surface: rgba(20, 31, 50, 0.96);
    --color-border: rgba(45, 60, 84, 0.8);
    --color-border-strong: rgba(57, 73, 101, 0.9);
    --color-text: #dbe7f5;
    --color-text-strong: #f5f8fc;
    --color-muted: #93a4bd;
    --color-primary: #76a7ff;
    --color-primary-soft: rgba(118, 167, 255, 0.17);
    --color-accent: #30d391;
    --color-accent-soft: rgba(48, 211, 145, 0.14);

    --shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.28);
    --shadow-panel: 0 28px 72px rgba(0, 0, 0, 0.42);
}