/*
 * Tolvex Admin — design tokens.
 * Цветовая система — по DESIGN.md (Linear-inspired).
 * Светлая тема — default. Тёмная — [data-theme="dark"]. Auto — [data-theme="auto"] переключается через media-query.
 */

:root,
[data-theme="light"] {
    /* Surfaces */
    --t-bg-page: #f7f8f8;
    --t-bg-panel: #ffffff;
    --t-bg-surface: #ffffff;
    --t-bg-surface-alt: #f3f4f5;
    --t-bg-surface-hover: #f0f1f2;
    --t-bg-inset: #f5f6f7;

    /* Text */
    --t-text-primary: #08090a;
    --t-text-secondary: #3a3f47;
    --t-text-tertiary: #62666d;
    --t-text-quaternary: #8a8f98;
    --t-text-on-accent: #ffffff;

    /* Brand */
    --t-accent: #5e6ad2;
    --t-accent-hover: #4d57b8;
    --t-accent-soft: rgba(94, 106, 210, 0.10);
    --t-accent-soft-hover: rgba(94, 106, 210, 0.16);

    /* Status */
    --t-success: #10b981;
    --t-success-soft: rgba(16, 185, 129, 0.12);
    --t-warning: #f59e0b;
    --t-warning-soft: rgba(245, 158, 11, 0.12);
    --t-danger: #dc2626;
    --t-danger-soft: rgba(220, 38, 38, 0.10);
    --t-danger-hover: #b91c1c;

    /* Borders */
    --t-border-subtle: rgba(8, 9, 10, 0.06);
    --t-border-standard: rgba(8, 9, 10, 0.10);
    --t-border-strong: rgba(8, 9, 10, 0.16);

    /* Shadows */
    --t-shadow-sm: 0 1px 2px rgba(8, 9, 10, 0.05);
    --t-shadow-md: 0 4px 12px rgba(8, 9, 10, 0.08);
    --t-shadow-lg: 0 12px 32px rgba(8, 9, 10, 0.12);
    --t-shadow-focus: 0 0 0 3px rgba(94, 106, 210, 0.18);

    /* Overlay */
    --t-overlay: rgba(8, 9, 10, 0.45);

    /* Radii */
    --t-radius-xs: 2px;
    --t-radius-sm: 4px;
    --t-radius-md: 6px;
    --t-radius-lg: 8px;
    --t-radius-xl: 12px;
    --t-radius-pill: 9999px;

    /* Spacing scale (8px base) */
    --t-space-1: 4px;
    --t-space-2: 8px;
    --t-space-3: 12px;
    --t-space-4: 16px;
    --t-space-5: 20px;
    --t-space-6: 24px;
    --t-space-7: 32px;
    --t-space-8: 40px;

    /* Typography */
    --t-font-sans: "Inter Variable", "Inter", "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --t-font-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    --t-font-features: "cv01", "ss03";
}

[data-theme="dark"] {
    --t-bg-page: #08090a;
    --t-bg-panel: #0f1011;
    --t-bg-surface: #191a1b;
    --t-bg-surface-alt: #28282c;
    --t-bg-surface-hover: rgba(255, 255, 255, 0.04);
    --t-bg-inset: #141516;

    --t-text-primary: #f7f8f8;
    --t-text-secondary: #d0d6e0;
    --t-text-tertiary: #8a8f98;
    --t-text-quaternary: #62666d;
    --t-text-on-accent: #ffffff;

    --t-accent: #5e6ad2;
    --t-accent-hover: #828fff;
    --t-accent-soft: rgba(113, 112, 255, 0.16);
    --t-accent-soft-hover: rgba(113, 112, 255, 0.24);

    --t-success: #27a644;
    --t-success-soft: rgba(39, 166, 68, 0.16);
    --t-warning: #f59e0b;
    --t-warning-soft: rgba(245, 158, 11, 0.16);
    --t-danger: #ef4444;
    --t-danger-soft: rgba(239, 68, 68, 0.16);
    --t-danger-hover: #f87171;

    --t-border-subtle: rgba(255, 255, 255, 0.05);
    --t-border-standard: rgba(255, 255, 255, 0.08);
    --t-border-strong: rgba(255, 255, 255, 0.16);

    --t-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --t-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --t-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
    --t-shadow-focus: 0 0 0 3px rgba(113, 112, 255, 0.32);

    --t-overlay: rgba(0, 0, 0, 0.85);
}

/* Auto-режим: следуем системной теме */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        --t-bg-page: #08090a;
        --t-bg-panel: #0f1011;
        --t-bg-surface: #191a1b;
        --t-bg-surface-alt: #28282c;
        --t-bg-surface-hover: rgba(255, 255, 255, 0.04);
        --t-bg-inset: #141516;

        --t-text-primary: #f7f8f8;
        --t-text-secondary: #d0d6e0;
        --t-text-tertiary: #8a8f98;
        --t-text-quaternary: #62666d;

        --t-accent-hover: #828fff;
        --t-accent-soft: rgba(113, 112, 255, 0.16);
        --t-accent-soft-hover: rgba(113, 112, 255, 0.24);

        --t-success: #27a644;
        --t-danger: #ef4444;
        --t-danger-hover: #f87171;

        --t-border-subtle: rgba(255, 255, 255, 0.05);
        --t-border-standard: rgba(255, 255, 255, 0.08);
        --t-border-strong: rgba(255, 255, 255, 0.16);

        --t-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --t-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
        --t-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
        --t-shadow-focus: 0 0 0 3px rgba(113, 112, 255, 0.32);

        --t-overlay: rgba(0, 0, 0, 0.85);
    }
}