/**
 * SmartAid — Design Tokens
 * ═══════════════════════════════════════════════════
 * Archivo central de paleta de colores, sombras, radios y transiciones.
 * Importar en: landing, panel, portal, login, docs.
 *
 * Uso:
 *   {% load static %}
 *   <link rel="stylesheet" href="{% static 'css/tokens.css' %}">
 *
 * Los templates pueden seguir definiendo variables locales que sobreescriban
 * estas si necesitan un override puntual, pero la fuente de verdad es este archivo.
 * ═══════════════════════════════════════════════════
 */

/* ─── Base Palette (raw colors, no semántica) ─── */
:root {
    /* Neutrals — Slate scale */
    --color-slate-50: #F8FAFC;
    --color-slate-100: #F1F5F9;
    --color-slate-200: #E2E8F0;
    --color-slate-300: #CBD5E1;
    --color-slate-400: #94A3B8;
    --color-slate-500: #64748B;
    --color-slate-600: #475569;
    --color-slate-700: #334155;
    --color-slate-800: #1F2937;
    --color-slate-900: #111827;
    --color-slate-950: #0F172A;

    /* Accent — Sand/warm brown */
    --color-accent-400: #A68B6B;
    --color-accent-500: #8B7355;
    --color-accent-600: #756147;

    /* Semantic status */
    --color-success-500: #2E7D68;
    --color-success-100: #E7F3EF;
    --color-success-900: #1F5F4F;

    --color-warning-500: #A16207;
    --color-warning-100: #FFF4D6;
    --color-warning-900: #713F12;

    --color-danger-500: #B91C1C;
    --color-danger-100: #FDECEC;
    --color-danger-900: #7F1D1D;

    --color-info-500: #3B6478;
    --color-info-100: #E8F1F5;
    --color-info-900: #294656;
}

/* ─── Semantic Tokens: Light (default) ─── */
:root,
[data-theme="light"] {
    /* Backgrounds */
    --bg: var(--color-slate-50);
    --bg-soft: var(--color-slate-100);
    --surface: #FFFFFF;
    --surface-hover: var(--color-slate-100);

    /* Text */
    --text: var(--color-slate-900);
    --text-secondary: var(--color-slate-700);
    --text-muted: var(--color-slate-500);
    --text-disabled: var(--color-slate-400);
    --text-inverse: #FFFFFF;

    /* Primary action */
    --primary: var(--color-slate-700);
    --primary-hover: #263445;
    --primary-active: var(--color-slate-800);
    --primary-text: #FFFFFF;

    /* Accent */
    --accent: var(--color-accent-500);
    --accent-hover: var(--color-accent-600);

    /* Borders */
    --border: var(--color-slate-200);
    --border-light: var(--color-slate-100);
    --border-strong: var(--color-slate-300);
    --border-focus: var(--color-slate-700);

    /* Status */
    --success: var(--color-success-500);
    --success-soft: var(--color-success-100);
    --success-text: var(--color-success-900);

    --warning: var(--color-warning-500);
    --warning-soft: var(--color-warning-100);
    --warning-text: var(--color-warning-900);

    --danger: var(--color-danger-500);
    --danger-soft: var(--color-danger-100);
    --danger-text: var(--color-danger-900);

    --info: var(--color-info-500);
    --info-soft: var(--color-info-100);
    --info-text: var(--color-info-900);

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 12px 36px rgba(51, 65, 85, 0.08);
    --shadow-lg: 0 24px 80px rgba(51, 65, 85, 0.12);
    --shadow-dropdown: 0 20px 40px rgba(15, 23, 42, 0.18);

    /* Overlays */
    --overlay: rgba(15, 23, 42, 0.6);

    /* Sidebar (always dark) */
    --sidebar-bg: var(--color-slate-900);
    --sidebar-bg-secondary: var(--color-slate-800);
    --sidebar-item-active: var(--color-slate-700);
    --sidebar-item-hover: #263445;
    --sidebar-text: var(--color-slate-50);
    --sidebar-text-secondary: var(--color-slate-300);
    --sidebar-icon-muted: var(--color-slate-400);
    --sidebar-active-accent: var(--color-accent-500);
    --sidebar-divider: var(--color-slate-800);

    /* Panel compatibility aliases */
    --panel-bg: var(--bg);
    --card-bg: var(--surface);
    --card-bg-hover: var(--surface-hover);
    --input-bg: var(--surface);
    --dropdown-bg: var(--surface);
    --modal-overlay: var(--overlay);
    --table-header-bg: var(--bg-soft);
    --text-primary: var(--text);
    --badge-success-bg: var(--success-soft);
    --badge-success-text: var(--success-text);
    --badge-warning-bg: var(--warning-soft);
    --badge-warning-text: var(--warning-text);
    --badge-danger-bg: var(--danger-soft);
    --badge-danger-text: var(--danger-text);
    --badge-info-bg: var(--info-soft);
    --badge-info-text: var(--info-text);
    --badge-neutral-bg: var(--color-slate-200);
    --badge-neutral-text: var(--color-slate-700);
    --primary-bg: var(--primary);
    --accent-bg: var(--accent);
    --focus-ring: rgba(51, 65, 85, 0.18);
    --shadow-card: var(--shadow-sm);
    --kpi-icon-bg: var(--bg-soft);
    --kpi-icon-color: var(--primary);
    --sidebar-text-primary: var(--sidebar-text);
    --sidebar-icon-active: var(--text-inverse);
    --sidebar-scrollbar: rgba(139, 115, 85, 0.55);
    --sidebar-scrollbar-hover: rgba(139, 115, 85, 0.82);
}

/* ─── Semantic Tokens: Dark ─── */
[data-theme="dark"] {
    /* Backgrounds */
    --bg: var(--color-slate-900);
    --bg-soft: var(--color-slate-800);
    --surface: var(--color-slate-800);
    --surface-hover: #263445;

    /* Text */
    --text: var(--color-slate-50);
    --text-secondary: var(--color-slate-300);
    --text-muted: var(--color-slate-400);
    --text-disabled: var(--color-slate-500);
    --text-inverse: var(--color-slate-900);

    /* Primary action — visible hierarchy without white buttons */
    --primary: var(--color-slate-600);
    --primary-hover: var(--color-slate-500);
    --primary-active: var(--color-slate-700);
    --primary-text: #FFFFFF;

    /* Accent */
    --accent: var(--color-accent-400);
    --accent-hover: var(--color-accent-500);

    /* Borders */
    --border: var(--color-slate-700);
    --border-light: #263445;
    --border-strong: var(--color-slate-500);
    --border-focus: var(--color-slate-300);

    /* Status (same hues, adjusted for dark) */
    --success: var(--color-success-500);
    --success-soft: #1A3A32;
    --success-text: #A7D8C8;

    --warning: var(--color-warning-500);
    --warning-soft: #3D2E0A;
    --warning-text: #FCD34D;

    --danger: var(--color-danger-500);
    --danger-soft: #3B1111;
    --danger-text: #FCA5A5;

    --info: var(--color-info-500);
    --info-soft: #1A2E38;
    --info-text: #A5D0E0;

    /* Shadows (darker, more diffuse) */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 12px 36px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.3);
    --shadow-dropdown: 0 20px 40px rgba(0, 0, 0, 0.4);

    /* Overlays */
    --overlay: rgba(0, 0, 0, 0.7);

    /* Sidebar (always dark and identical across themes) */
    --sidebar-bg: var(--color-slate-900);
    --sidebar-bg-secondary: var(--color-slate-800);
    --sidebar-item-active: var(--color-slate-700);
    --sidebar-item-hover: #263445;
    --sidebar-text: var(--color-slate-50);
    --sidebar-text-secondary: var(--color-slate-300);
    --sidebar-icon-muted: var(--color-slate-400);
    --sidebar-active-accent: var(--color-accent-500);
    --sidebar-divider: var(--color-slate-800);

    /* Panel compatibility aliases */
    --panel-bg: var(--bg);
    --card-bg: var(--surface);
    --card-bg-hover: var(--surface-hover);
    --input-bg: var(--surface);
    --dropdown-bg: var(--surface);
    --modal-overlay: var(--overlay);
    --table-header-bg: var(--surface);
    --text-primary: var(--text);
    --badge-success-bg: var(--success-soft);
    --badge-success-text: var(--success-text);
    --badge-warning-bg: var(--warning-soft);
    --badge-warning-text: var(--warning-text);
    --badge-danger-bg: var(--danger-soft);
    --badge-danger-text: var(--danger-text);
    --badge-info-bg: var(--info-soft);
    --badge-info-text: var(--info-text);
    --badge-neutral-bg: var(--color-slate-700);
    --badge-neutral-text: var(--color-slate-300);
    --primary-bg: var(--primary);
    --accent-bg: var(--accent);
    --focus-ring: rgba(203, 213, 225, 0.22);
    --shadow-card: var(--shadow-sm);
    --kpi-icon-bg: var(--color-slate-700);
    --kpi-icon-color: var(--color-slate-50);
    --sidebar-text-primary: var(--sidebar-text);
    --sidebar-icon-active: var(--color-slate-50);
    --sidebar-scrollbar: rgba(139, 115, 85, 0.55);
    --sidebar-scrollbar-hover: rgba(139, 115, 85, 0.82);
}

/* ─── Layout Tokens ─── */
:root {
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 999px;

    --ease-default: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 200ms;
    --duration-normal: 360ms;
    --duration-slow: 600ms;
}