/* ============================================================
   Teyuto Admin v2 — Design tokens
   Tema switchato via [data-theme] su <html> (theme.js + anti-FOUC in head.php).
   Tutto il CSS admin2 usa SOLO questi token: mai colori hardcoded nei componenti.
   ============================================================ */

:root {
    /* --- Primitives (theme-invariant) --- */
    --a2-blue-400: #49ccfb;
    --a2-blue-500: #1babfb;
    --a2-blue-600: #0e93e0;
    --a2-violet-500: #5c5bce;
    --a2-green-500: #2fbf71;
    --a2-amber-500: #f5a623;
    --a2-red-500: #e5484d;

    --a2-gradient-brand: linear-gradient(135deg, #49ccfb 0%, #5c5bce 100%);

    /* --- Scale --- */
    --a2-radius-sm: 6px;
    --a2-radius-md: 10px;
    --a2-radius-lg: 14px;
    --a2-radius-full: 999px;

    --a2-space-1: 4px;
    --a2-space-2: 8px;
    --a2-space-3: 12px;
    --a2-space-4: 16px;
    --a2-space-5: 24px;
    --a2-space-6: 32px;
    --a2-space-7: 48px;

    --a2-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --a2-font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, monospace;

    --a2-text-xs: 11px;
    --a2-text-sm: 12.5px;
    --a2-text-md: 14px;
    --a2-text-lg: 16px;
    --a2-text-xl: 20px;
    --a2-text-2xl: 26px;

    --a2-sidebar-w: 240px;
    --a2-sidebar-w-rail: 68px;
    --a2-topbar-h: 60px;
    --a2-content-max: 1240px;

    --a2-transition: 160ms cubic-bezier(.4, 0, .2, 1);
}

/* --- Tema scuro (default) --- */
:root,
:root[data-theme="dark"] {
    --a2-bg: #0b0d10;
    --a2-surface-1: #121418;
    --a2-surface-2: #191c21;
    --a2-surface-3: #22262d;
    --a2-surface-hover: rgba(255, 255, 255, .05);

    --a2-text-1: #eef1f4;
    --a2-text-2: #9aa4b2;
    --a2-text-3: #5f6b7a;

    --a2-border: rgba(255, 255, 255, .08);
    --a2-border-strong: rgba(255, 255, 255, .16);

    --a2-accent: var(--a2-blue-500);
    --a2-accent-soft: rgba(27, 171, 251, .13);
    --a2-accent-text: #08222f;

    --a2-success: var(--a2-green-500);
    --a2-success-soft: rgba(47, 191, 113, .14);
    --a2-warning: var(--a2-amber-500);
    --a2-warning-soft: rgba(245, 166, 35, .14);
    --a2-danger: #ff6369;
    --a2-danger-soft: rgba(229, 72, 77, .15);

    --a2-shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
    --a2-shadow-2: 0 8px 28px rgba(0, 0, 0, .55);
    --a2-backdrop: rgba(4, 6, 10, .66);

    --a2-chart-grid: rgba(255, 255, 255, .06);
    --a2-chart-tick: #8b95a3;

    color-scheme: dark;
}

/* --- Tema chiaro --- */
:root[data-theme="light"] {
    --a2-bg: #f7f8fa;
    --a2-surface-1: #ffffff;
    --a2-surface-2: #f2f4f7;
    --a2-surface-3: #e9edf2;
    --a2-surface-hover: rgba(16, 24, 40, .045);

    --a2-text-1: #10161d;
    --a2-text-2: #51606f;
    --a2-text-3: #8a97a5;

    --a2-border: rgba(16, 24, 40, .10);
    --a2-border-strong: rgba(16, 24, 40, .22);

    --a2-accent: var(--a2-blue-600);
    --a2-accent-soft: rgba(14, 147, 224, .10);
    --a2-accent-text: #ffffff;

    --a2-success: #1f9d5c;
    --a2-success-soft: rgba(31, 157, 92, .12);
    --a2-warning: #c47d0e;
    --a2-warning-soft: rgba(196, 125, 14, .12);
    --a2-danger: #d93840;
    --a2-danger-soft: rgba(217, 56, 64, .10);

    --a2-shadow-1: 0 1px 2px rgba(16, 24, 40, .07);
    --a2-shadow-2: 0 8px 28px rgba(16, 24, 40, .14);
    --a2-backdrop: rgba(23, 30, 40, .45);

    --a2-chart-grid: rgba(16, 24, 40, .07);
    --a2-chart-tick: #6b7684;

    color-scheme: light;
}