:root {
    /* ═══════════════════════════════════════════════════════════════════
       DESIGN TOKENS — Figuetronic ERP
       Soft Blue Enterprise Light Mode
       Primary: #4B7BEC (Soft Blue)
       ═══════════════════════════════════════════════════════════════════ */

    /* ── Surfaces ── */
    --bg-main:        #F0F4F8;
    --bg-base:        #FFFFFF;
    --bg-sidebar:     #F6F8FB;
    --bg-elevated:    #FFFFFF;
    --bg-overlay:     rgba(0, 0, 0, 0.4);
    --bg-card:        #FFFFFF;
    --bg-input:       #FFFFFF;
    --bg-hover:       rgba(0, 0, 0, 0.05);
    --bg-active:      rgba(75, 123, 236, 0.08);

    /* ── Borders ── */
    --border-color:   rgba(0, 0, 0, 0.10);
    --border-subtle:  rgba(0, 0, 0, 0.06);
    --border-default: rgba(0, 0, 0, 0.10);
    --border-strong:  rgba(0, 0, 0, 0.16);
    --border-light:   rgba(0, 0, 0, 0.05);

    /* ── Text (alpha-blended) ── */
    --text-primary:   rgba(0, 0, 0, 0.85);
    --text-secondary: rgba(0, 0, 0, 0.50);
    --text-tertiary:  rgba(0, 0, 0, 0.25);
    --text-muted:     rgba(0, 0, 0, 0.12);

    /* ── Brand ── */
    --primary:        #4B7BEC;
    --primary-hover:  #3A6AD4;
    --primary-light:  rgba(75, 123, 236, 0.08);
    --primary-tint:   rgba(75, 123, 236, 0.12);
    --primary-glow:   rgba(75, 123, 236, 0.18);
    --accent:         #34C759;
    --accent-hover:   #2DB84E;
    --danger:         #FF3B30;
    --danger-hover:   #E0342B;
    --warning:        #FF9500;
    --orange:         #FF9500;
    --success:        var(--accent);

    /* ── Status Colors ── */
    --status-pendiente-bg:   rgba(255, 149, 0, 0.10);
    --status-pendiente-text: #C77B00;
    --status-proceso-bg:     rgba(75, 123, 236, 0.10);
    --status-proceso-text:   #4B7BEC;
    --status-finalizado-bg:  rgba(52, 199, 89, 0.10);
    --status-finalizado-text:#248A3D;
    --status-cancelado-bg:   rgba(255, 59, 48, 0.10);
    --status-cancelado-text: #D70015;

    /* ── Spacing Scale (4px increments) ── */
    --space-0:  0;
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-7:  28px;
    --space-8:  32px;
    --space-9:  36px;
    --space-10: 40px;
    --space-11: 44px;
    --space-12: 48px;

    /* ── Typography Scale ── */
    --fs-4xl: 2.25rem;
    --fs-3xl: 1.75rem;
    --fs-2xl: 1.375rem;
    --fs-xl:  1.125rem;
    --fs-lg:  1rem;
    --fs-md:  0.875rem;
    --fs-sm:  0.75rem;
    --fs-xs:  0.7rem;

    --lh-tight:  1.2;
    --lh-snug:   1.35;
    --lh-normal: 1.5;
    --lh-loose:  1.65;

    --tracking-tight:  -0.02em;
    --tracking-normal: 0;
    --tracking-wide:   0.04em;

    --fw-light:     300;
    --fw-normal:    400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;
    --fw-extrabold: 800;

    /* ── Shadows ── */
    --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.03);
    --shadow-lg:   0 12px 32px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
    --shadow-xl:   0 24px 48px rgba(0, 0, 0, 0.10);
    --shadow-focus: 0 0 0 4px rgba(75, 123, 236, 0.20);
    --shadow-glow: 0 0 20px rgba(75, 123, 236, 0.08);

    /* ── Radii ── */
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* ── Glass ── */
    --glass-blur: blur(20px);

    /* ── Transitions ── */
    --transition:        all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast:   all 0.12s ease-out;
    --transition-sidebar: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Font ── */
    --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', 'Segoe UI', sans-serif;

    /* ── Form ── */
    --input-height:      36px;
    --input-height-sm:   28px;
    --input-height-lg:   44px;
    --input-bg-focus:    rgba(75, 123, 236, 0.04);
    --input-border-focus: var(--primary);

    /* ── Button ── */
    --btn-height-xs: 24px;
    --btn-height-sm: 28px;
    --btn-height-md: 36px;
    --btn-height-lg: 44px;

    /* ── Z-Index Hierarchy ── */
    --z-content:          1;
    --z-sticky:           100;
    --z-form-sidebar:     900;
    --z-sidebar-overlay:  1000;
    --z-nav-sidebar:      1100;
    --z-bottom-nav:       1500;
    --z-fab:              1600;
    --z-modal:            3000;
    --z-command-palette:  3500;
    --z-lightbox:         10000;
    --z-toast:            11000;

    /* ── Layout Dimensions ── */
    --bottom-nav-height:   64px;
    --sidebar-width-full:  260px;
    --sidebar-width-compact: 76px;
    --topbar-height:       52px;

    /* ── Touch Target Scale ── */
    --touch-target-min: 44px;
    --touch-target-sm:   36px;
    --touch-target-lg:   48px;

    /* ═══════════════════════════════════════════════════════════════════
       TOKENS v2 (aditivos) — Gradientes, velocidades y capas de énfasis.
       No reemplazan a los existentes: los extienden para el diseño Pro.
       ═══════════════════════════════════════════════════════════════════ */

    /* ── Gradientes de marca y estado ── */
    --grad-primary:      linear-gradient(135deg, #4B7BEC 0%, #34C759 100%);
    --grad-primary-soft: linear-gradient(135deg, rgba(75,123,236,0.12), rgba(52,199,89,0.10));
    --grad-surface:      linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
    --grad-status-pendiente:  linear-gradient(135deg, #F59E0B, #FFB02E);
    --grad-status-proceso:    linear-gradient(135deg, #4B7BEC, #6B9AFF);
    --grad-status-finalizado: linear-gradient(135deg, #10B981, #34C759);
    --grad-status-cancelado: linear-gradient(135deg, #EF4444, #FF5147);

    /* ── Velocidades de animación ── */
    --speed-fast:   120ms;
    --speed-normal: 250ms;
    --speed-slow:   400ms;
    --ease-out:     cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring:  cubic-bezier(0.34, 1.3, 0.64, 1);

    /* ── Acentos de estado (tarjetas / iconos-tile) ── */
    --st-pendiente:   #F59E0B;
    --st-proceso:     #4B7BEC;
    --st-finalizado:  #10B981;
    --st-cancelado:   #EF4444;
    --st-revision:    #A855F7;
    --st-espera:      #F59E0B;
}

/* ═══════════════════════════════════════════════════════════════════════
   TEMA OSCURO — "Workshop Night"
   Se activa con <html data-theme="dark">. Solo se sobreescriben los
   tokens: el 90% de la plataforma usa var(--…) y casca automáticamente.
   Los restos hardcodeados se corrigen en css/dark-fixes.css.
   ═══════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    color-scheme: dark;

    /* ── Surfaces (azul-grafito, armonía con el primary) ── */
    --bg-main:        #0B1220;
    --bg-base:        #0F1626;
    --bg-sidebar:     #0C1322;
    --bg-elevated:    #16213A;
    --bg-overlay:     rgba(0, 0, 0, 0.60);
    --bg-card:        #131C31;
    --bg-input:       #0F1830;
    --bg-hover:       rgba(255, 255, 255, 0.06);
    --bg-active:      rgba(107, 154, 255, 0.16);

    /* ── Borders ── */
    --border-color:   rgba(255, 255, 255, 0.10);
    --border-subtle:  rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.10);
    --border-strong:  rgba(255, 255, 255, 0.20);
    --border-light:   rgba(255, 255, 255, 0.05);

    /* ── Text ── */
    --text-primary:   rgba(255, 255, 255, 0.92);
    --text-secondary: rgba(255, 255, 255, 0.60);
    --text-tertiary:  rgba(255, 255, 255, 0.32);
    --text-muted:     rgba(255, 255, 255, 0.14);

    /* ── Brand (aclarados para contraste AA sobre superficies oscuras) ── */
    --primary:        #6B9AFF;
    --primary-hover:  #8AB0FF;
    --primary-light:  rgba(107, 154, 255, 0.10);
    --primary-tint:   rgba(107, 154, 255, 0.16);
    --primary-glow:   rgba(107, 154, 255, 0.28);
    --accent:         #3DDC71;
    --accent-hover:   #2FCB61;
    --danger:         #FF5147;
    --danger-hover:   #FF6B63;
    --warning:        #FFB02E;
    --orange:         #FFB02E;

    /* ── Status (fondos translúcidos + texto brillante) ── */
    --status-pendiente-bg:    rgba(255, 176, 46, 0.14);
    --status-pendiente-text:  #FFC46B;
    --status-proceso-bg:      rgba(107, 154, 255, 0.14);
    --status-proceso-text:    #9DBDFF;
    --status-finalizado-bg:   rgba(61, 220, 113, 0.14);
    --status-finalizado-text:#7CE8A0;
    --status-cancelado-bg:    rgba(255, 81, 71, 0.14);
    --status-cancelado-text: #FF8A84;

    /* ── Shadows (más profundos en oscuro) ── */
    --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.30);
    --shadow-lg:   0 12px 32px rgba(0, 0, 0, 0.50), 0 4px 8px rgba(0, 0, 0, 0.35);
    --shadow-xl:   0 24px 48px rgba(0, 0, 0, 0.55);
    --shadow-focus: 0 0 0 4px rgba(107, 154, 255, 0.30);
    --shadow-glow: 0 0 24px rgba(107, 154, 255, 0.18);

    /* ── Form ── */
    --input-bg-focus: rgba(107, 154, 255, 0.08);

    /* ── Gradientes v2 en oscuro ── */
    --grad-primary:      linear-gradient(135deg, #6B9AFF 0%, #3DDC71 100%);
    --grad-primary-soft: linear-gradient(135deg, rgba(107,154,255,0.14), rgba(61,220,113,0.10));
    --grad-surface:      linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0));
}