:root {
    color-scheme: light;

    --color-accent-50: #eef2ff;
    --color-accent-100: #e0e7ff;
    --color-accent-200: #c7d2fe;
    --color-accent-300: #a5b4fc;
    --color-accent-400: #818cf8;
    --color-accent-500: #6366f1;
    --color-accent-600: #4f46e5;
    --color-accent-700: #4338ca;

    --color-violet-400: #a78bfa;
    --color-violet-500: #8b5cf6;
    --color-teal-400: #2dd4bf;
    --color-teal-500: #14b8a6;
    --color-amber-400: #fbbf24;
    --color-amber-500: #f59e0b;
    --color-rose-400: #fb7185;
    --color-rose-500: #f43f5e;
    --color-emerald-400: #34d399;
    --color-emerald-500: #10b981;
    --color-sky-400: #38bdf8;

    --surface-app: #f4f5fb;
    --surface-raised: #ffffff;
    --surface-sunken: #eceef7;
    --surface-inset: #f8f9fd;
    --surface-inverted: #171a2b;
    --surface-overlay: rgba(19, 21, 38, .45);

    --sidebar-bg: #14162a;
    --sidebar-fg: #b7bdd6;
    --sidebar-fg-strong: #ffffff;
    --sidebar-hover: rgba(255, 255, 255, .07);
    --sidebar-active: rgba(99, 102, 241, .22);

    --text-strong: #12142a;
    --text-default: #33375a;
    --text-muted: #6b7095;
    --text-subtle: #8d92b3;
    --text-on-accent: #ffffff;

    --border-soft: #e4e6f2;
    --border-default: #d7dae9;
    --border-strong: #bfc4dc;

    --accent: var(--color-accent-600);
    --accent-soft: var(--color-accent-50);
    --accent-hover: var(--color-accent-700);

    --success: #0f9d6e;
    --success-soft: #e3f7ef;
    --warning: #b8730a;
    --warning-soft: #fdf3e0;
    --danger: #d32b52;
    --danger-soft: #fdeaef;
    --info: #1f7fc4;
    --info-soft: #e6f2fb;

    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 56px;
    --space-10: 72px;

    --font-sans: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Inter", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    --text-xs: .6875rem;
    --text-sm: .8125rem;
    --text-base: .9375rem;
    --text-md: 1.0625rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 1.875rem;
    --text-3xl: 2.375rem;
    --text-4xl: 3rem;

    --shadow-xs: 0 1px 2px rgba(20, 22, 42, .06);
    --shadow-sm: 0 2px 6px rgba(20, 22, 42, .07);
    --shadow-md: 0 8px 24px rgba(20, 22, 42, .09);
    --shadow-lg: 0 20px 48px rgba(20, 22, 42, .14);
    --shadow-accent: 0 10px 28px rgba(79, 70, 229, .28);

    --sidebar-width: 264px;
    --topbar-height: 64px;
    --content-max: 1480px;

    --ease: cubic-bezier(.4, 0, .2, 1);
    --duration: 180ms;
}

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

    --surface-app: #0d0f1c;
    --surface-raised: #161a2e;
    --surface-sunken: #11142450;
    --surface-inset: #1c2038;
    --surface-inverted: #eceef7;
    --surface-overlay: rgba(4, 5, 12, .6);

    --sidebar-bg: #0a0c17;
    --sidebar-fg: #9ba2c2;
    --sidebar-fg-strong: #ffffff;
    --sidebar-hover: rgba(255, 255, 255, .06);
    --sidebar-active: rgba(129, 140, 248, .24);

    --text-strong: #f2f3fa;
    --text-default: #d3d7ea;
    --text-muted: #9096b7;
    --text-subtle: #767ca0;

    --border-soft: #242942;
    --border-default: #2e3450;
    --border-strong: #3b4265;

    --accent: var(--color-accent-400);
    --accent-soft: rgba(99, 102, 241, .16);
    --accent-hover: var(--color-accent-300);

    --success: #3ddca0;
    --success-soft: rgba(16, 185, 129, .16);
    --warning: #f5bd52;
    --warning-soft: rgba(245, 158, 11, .16);
    --danger: #ff7d97;
    --danger-soft: rgba(244, 63, 94, .16);
    --info: #6ac2f5;
    --info-soft: rgba(56, 189, 248, .16);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .45);
    --shadow-md: 0 10px 28px rgba(0, 0, 0, .5);
    --shadow-lg: 0 24px 56px rgba(0, 0, 0, .6);
    --shadow-accent: 0 10px 28px rgba(79, 70, 229, .45);
}

[data-role="salesmanager"] {
    --role-accent: var(--color-accent-500);
    --role-accent-2: var(--color-sky-400);
}

[data-role="salestrainer"] {
    --role-accent: var(--color-violet-500);
    --role-accent-2: var(--color-rose-400);
}

[data-role="salesperson"] {
    --role-accent: var(--color-teal-500);
    --role-accent-2: var(--color-emerald-400);
}