/**
 * Talia v14 design tokens
 *
 * Mirrors the CRM slate/sapphire palette without coupling the internal v14
 * application to the CRM's React/Tailwind runtime. Components consume only
 * semantic variables so light and dark themes stay in lock-step.
 */
:root {
    color-scheme: light;

    /* Brand */
    --color-primary: #3d5a99;
    --color-primary-hover: #334d85;
    --color-primary-pressed: #2a4070;
    --color-primary-subtle: #e4eaf4;
    --color-on-primary: #ffffff;
    --color-secondary: #1e2a3a;
    --color-secondary-hover: #2b3a4f;
    --color-on-secondary: #e8edf5;

    /* Navigation remains an intentionally dark, stable anchor in both themes. */
    --color-nav-bg: #1e2a3a;
    --color-nav-bg-hover: #27364a;
    --color-nav-ink: #e8edf5;
    --color-nav-muted: rgb(232 237 245 / 0.62);
    --color-nav-subtle: rgb(232 237 245 / 0.42);
    --color-nav-outline: rgb(255 255 255 / 0.08);

    /* Surfaces */
    --color-bg: hsl(216 40% 97%);
    --color-surface-1: #ffffff;
    --color-surface-2: hsl(216 35% 95%);
    --color-surface-3: hsl(216 40% 91%);
    --color-surface-inverse: #1e2a3a;
    --color-overlay: rgb(12 20 35 / 0.52);

    /* Text */
    --color-ink: #1a2332;
    --color-ink-muted: #5a6a7e;
    --color-ink-subtle: #8a9bb0;
    --color-ink-inverse: #f5f8fc;

    /* Borders and focus */
    --color-outline: rgb(30 60 120 / 0.10);
    --color-outline-strong: rgb(30 60 120 / 0.17);
    --color-outline-subtle: rgb(30 60 120 / 0.055);
    --color-focus: rgb(61 90 153 / 0.28);

    /* Semantic */
    --color-success: #059669;
    --color-success-subtle: #dff7ee;
    --color-warning: #d97706;
    --color-warning-subtle: #fff2d8;
    --color-danger: #dc2626;
    --color-danger-subtle: #fee7e7;
    --color-info: #2563eb;
    --color-info-subtle: #e4edff;
    --color-critical: #b42318;
    --color-critical-subtle: #fee4e2;

    /* Typography */
    --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
    --font-size-2xs: 0.6875rem;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.8125rem;
    --font-size-md: 0.875rem;
    --font-size-lg: 1rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.625rem;
    --font-size-3xl: 2rem;

    /* 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;

    /* Shape */
    --radius-xs: 0.375rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --radius-full: 999px;

    /* Elevation */
    --shadow-1: 0 1px 3px rgb(30 60 120 / 0.06), 0 1px 2px rgb(30 60 120 / 0.04);
    --shadow-2: 0 4px 12px rgb(30 60 120 / 0.08), 0 2px 4px rgb(30 60 120 / 0.04);
    --shadow-3: 0 16px 38px rgb(30 60 120 / 0.14), 0 5px 14px rgb(30 60 120 / 0.08);
    --shadow-modal: 0 28px 70px rgb(8 18 36 / 0.28);

    /* Motion */
    --duration-fast: 120ms;
    --duration-normal: 180ms;
    --duration-slow: 260ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* Application frame */
    --sidebar-width: 272px;
    --header-height: 68px;
    --content-max: 1540px;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --color-primary: #7290d1;
    --color-primary-hover: #86a1dc;
    --color-primary-pressed: #5e7abd;
    --color-primary-subtle: #1a2847;
    --color-on-primary: #0d1628;
    --color-secondary: #dce6f6;
    --color-secondary-hover: #ffffff;
    --color-on-secondary: #142033;

    --color-nav-bg: #111b29;
    --color-nav-bg-hover: #1b2a3d;
    --color-nav-ink: #f1f5fb;
    --color-nav-muted: rgb(232 237 245 / 0.68);
    --color-nav-subtle: rgb(232 237 245 / 0.46);
    --color-nav-outline: rgb(255 255 255 / 0.09);

    --color-bg: hsl(215 28% 10%);
    --color-surface-1: hsl(215 25% 15%);
    --color-surface-2: hsl(215 22% 12%);
    --color-surface-3: hsl(215 20% 20%);
    --color-surface-inverse: #edf3fc;
    --color-overlay: rgb(2 7 15 / 0.72);

    --color-ink: hsl(210 25% 92%);
    --color-ink-muted: hsl(215 13% 65%);
    --color-ink-subtle: hsl(215 12% 49%);
    --color-ink-inverse: #132035;

    --color-outline: rgb(120 150 205 / 0.16);
    --color-outline-strong: rgb(120 150 205 / 0.26);
    --color-outline-subtle: rgb(120 150 205 / 0.09);
    --color-focus: rgb(114 144 209 / 0.38);

    --color-success: #34d399;
    --color-success-subtle: #123d34;
    --color-warning: #fbbf24;
    --color-warning-subtle: #3b2b12;
    --color-danger: #f87171;
    --color-danger-subtle: #431d23;
    --color-info: #60a5fa;
    --color-info-subtle: #162d50;
    --color-critical: #ff8a80;
    --color-critical-subtle: #4b1f25;

    --shadow-1: 0 1px 3px rgb(0 0 0 / 0.25);
    --shadow-2: 0 6px 18px rgb(0 0 0 / 0.26);
    --shadow-3: 0 18px 48px rgb(0 0 0 / 0.34);
    --shadow-modal: 0 28px 78px rgb(0 0 0 / 0.55);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-normal: 0ms;
        --duration-slow: 0ms;
    }
}