/* =========================================================================
   Design Tokens — gymsoft ERP gym
   --------------------------------------------------------------------------
   Variables CSS para colores, tipografía, espaciado y sombras.
   Single source of truth: si un valor visual aparece >1 vez, vive acá.

   Estructura:
   - :root[data-theme="light"]  → tema claro (default)
   - :root[data-theme="dark"]   → tema oscuro
   - :root (sin selector)       → tokens neutros (tipografía, espaciado, sombras)

   Ver docs/UI_DESIGN.md §5 para la especificación completa.
   ========================================================================= */

:root {
    /* ---------- Tipografía ---------- */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Consolas', monospace;

    --text-xs: 12px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 22px;
    --text-2xl: 28px;
    --text-3xl: 36px;

    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --leading-loose: 1.75;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* ---------- Espaciado (sistema de 4) ---------- */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ---------- Border radius ---------- */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-pill: 999px;

    /* ---------- Layout ---------- */
    --navbar-height: 60px;
    --sidebar-width: 260px;
    --sidebar-width-collapsed: 56px;
    --content-padding: 24px;

    /* ---------- Z-index layers ---------- */
    --z-content: 1;
    --z-dropdown: 1000;
    --z-sidebar: 1010;
    --z-navbar: 1020;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-tooltip: 1100;

    /* ---------- Animación ---------- */
    --transition-fast: 100ms ease;
    --transition-base: 150ms ease;
    --transition-slow: 200ms ease;
}

/* ============================== LIGHT ============================== */
:root[data-theme="light"] {
    /* Surfaces */
    --bg-page:        #f7f8fa;
    --bg-surface:     #ffffff;
    --bg-elevated:    #ffffff;
    --bg-hover:       #f1f3f6;
    --bg-active:      #e8edf5;

    /* Texto */
    --text-primary:   #1a1f2c;
    --text-secondary: #5a6478;
    --text-muted:     #8b94a8;
    --text-inverse:   #ffffff;

    /* Bordes */
    --border-subtle:  #e5e8ee;
    --border-default: #d1d6df;
    --border-strong:  #a8b0bf;

    /* Acento principal */
    --accent:         #4f6ef7;
    --accent-hover:   #3d5be0;
    --accent-active:  #324ec8;
    --accent-soft:    #e8edff;
    --accent-text:    #ffffff;
    /* Triplete del acento: Bootstrap 5.3 arma .text-primary y .bg-primary con
       rgba(var(--bs-primary-rgb), ...), así que necesita el color sin #. */
    --accent-rgb:     79, 110, 247;

    /* Estados */
    --success:        #16a571;
    --success-soft:   #e0f6ec;
    --warning:        #d97706;
    --warning-soft:   #fef3e2;
    --danger:         #dc2f3d;
    --danger-soft:    #fde7e9;
    --info:           #0891b2;
    --info-soft:      #e0f4f8;

    /* Sombras */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

    /* Backdrop */
    --backdrop: rgba(0, 0, 0, 0.4);

    /* Color scheme nativo (form controls, scrollbars) */
    color-scheme: light;
}

/* ============================== DARK =============================== */
:root[data-theme="dark"] {
    /* Surfaces */
    --bg-page:        #0e1117;
    --bg-surface:     #161b22;
    --bg-elevated:    #1c232c;
    --bg-hover:       #222934;
    --bg-active:      #2a3340;

    /* Texto */
    --text-primary:   #e6edf3;
    --text-secondary: #a8b3c2;
    --text-muted:     #6e7889;
    --text-inverse:   #1a1f2c;

    /* Bordes */
    --border-subtle:  #21262d;
    --border-default: #30363d;
    --border-strong:  #484f58;

    /* Acento principal */
    --accent:         #6c8aff;
    --accent-hover:   #8aa2ff;
    --accent-active:  #5570d5;
    --accent-soft:    #1c2740;
    --accent-text:    #ffffff;
    --accent-rgb:     108, 138, 255;

    /* Estados */
    --success:        #2ea968;
    --success-soft:   #143524;
    --warning:        #e08e3a;
    --warning-soft:   #3a2818;
    --danger:         #e85365;
    --danger-soft:    #3a1c20;
    --info:           #2ab0c9;
    --info-soft:      #122e35;

    /* Sombras (más opacas en dark) */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);

    /* Backdrop */
    --backdrop: rgba(0, 0, 0, 0.6);

    color-scheme: dark;
}

/* Default si no hay data-theme: light */
:root:not([data-theme]) {
    color-scheme: light;
}