/* Design tokens — CRM «Масяня» v0.9 UI foundation */

:root {
    color-scheme: light;

    /* Typography */
    --font-family-base: "Segoe UI Variable Text", "Segoe UI Variable", "SF Pro Text", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-family-display: "Segoe UI Variable Display", "Segoe UI Variable", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-family-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --line-height-tight: 1.25;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.625;

    /* Colors */
    --color-bg: #f7f7ff;
    --color-surface: #ffffff;
    --color-surface-muted: #f3f1fb;
    --color-border: #e5e2f1;
    --color-border-strong: #cbc6df;
    --color-text: #18152a;
    --color-text-muted: #625e73;
    --color-text-subtle: #8b879b;
    --color-primary: #27187e;
    --color-primary-hover: #1f1266;
    --color-primary-soft: #eeebff;
    --color-accent: #2ecc71;
    --color-danger: #c0392b;
    --color-danger-soft: #fdecea;
    --color-warning: #d68910;
    --color-warning-soft: #fef5e7;
    --color-success: #1e8449;
    --color-success-soft: #e9f7ef;
    --color-info: #2874a6;
    --color-info-soft: #ebf5fb;
    --color-focus: #27187e;
    --color-disabled: #95a5a6;
    --color-disabled-bg: #eef1f4;
    --color-sidebar-bg: #27187e;
    --color-sidebar-text: #f7f7ff;
    --color-sidebar-muted: #c8c2ed;
    --color-sidebar-active: #f7f7ff;
    --color-sidebar-hover: rgb(247 247 255 / 10%);

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* Layout */
    --sidebar-width: 15rem;
    --topbar-height: 4.5rem;
    --content-max-width: 80rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --shadow-sm: 0 1px 2px rgb(39 24 126 / 5%);
    --shadow-md: 0 8px 24px rgb(39 24 126 / 8%);
    --shadow-lg: 0 20px 50px rgb(39 24 126 / 14%);
    --z-drawer: 200;
    --z-topbar: 100;
    --z-skip-link: 300;

    /* Motion */
    --transition-fast: 120ms ease;
    --transition-base: 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-base: 0ms;
    }
}