/* ============================================================================
   MySmartBreaker Platform v2.0 — P0.5
   Sistema de Diseño Visual · Tokens de diseño (CSS Custom Properties)
   Fuente única de verdad para color, tipografía, espaciado, radios, sombras y
   breakpoints. Todos los componentes consumen exclusivamente estas variables.
   Accesibilidad: contrastes verificados WCAG AA sobre fondos claros.
   ============================================================================ */

:root {
    /* ----- Marca / Primarios (confianza + tecnología energética) ----- */
    --color-primary:        #0B3D6E;   /* azul corporativo profundo */
    --color-primary-600:    #0A3560;
    --color-primary-700:    #082B4F;
    --color-accent:         #1A5F9E;   /* azul acento (enlaces, foco) */
    --color-accent-300:     #5B93C7;

    /* ----- Secundarios / Neutros ----- */
    --color-bg:             #F5F7FA;   /* fondo de aplicación */
    --color-surface:        #FFFFFF;   /* tarjetas y paneles */
    --color-surface-alt:    #EEF2F7;   /* filas alternas, subpaneles */
    --color-border:         #D3DBE4;
    --color-text:           #1B2733;   /* texto principal (AA sobre surface) */
    --color-text-muted:     #5A6B7B;   /* texto secundario */
    --color-text-inverse:   #FFFFFF;

    /* ----- Estados semánticos ----- */
    --color-success:        #1B7A3D;
    --color-success-bg:     #E4F4EA;
    --color-warning:        #C05A00;
    --color-warning-bg:     #FBEEDD;
    --color-danger:         #B01C1C;
    --color-danger-bg:      #FBE6E6;
    --color-info:           #1A5F9E;
    --color-info-bg:        #E3EEF8;

    /* ----- Estados del breaker (NO dependen solo del color: ver iconos/texto) --- */
    --color-breaker-on:       #1B7A3D;  /* ON / Closed  — energizado */
    --color-breaker-off:      #6B7280;  /* OFF / Open    — desenergizado */
    --color-breaker-fault:    #C05A00;  /* FAULT         — fallo detectado */
    --color-breaker-trip:     #B01C1C;  /* TRIPPED       — disparo de protección */
    --color-breaker-unknown:  #8B5CF6;  /* UNKNOWN       — estado no reportado */
    --color-breaker-offline:  #374151;  /* OFFLINE       — sin conexión */

    /* ----- Gradientes corporativos (imagen premium) ----- */
    --grad-brand:   linear-gradient(135deg, #0B3D6E 0%, #12518f 55%, #16B3AC 140%);
    --grad-sidebar: linear-gradient(180deg, #0a1f38 0%, #10314f 100%);
    --grad-card:    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);

    /* ----- Tipografía ----- */
    --font-sans: 'Inter', 'Segoe UI', Calibri, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: Consolas, 'Courier New', 'SF Mono', monospace;  /* valores energéticos */

    --fs-h1: 2.25rem;   --lh-h1: 1.2;   --fw-h1: 700;
    --fs-h2: 1.75rem;   --lh-h2: 1.25;  --fw-h2: 700;
    --fs-h3: 1.375rem;  --lh-h3: 1.3;   --fw-h3: 600;
    --fs-h4: 1.125rem;  --lh-h4: 1.35;  --fw-h4: 600;
    --fs-h5: 1rem;      --lh-h5: 1.4;   --fw-h5: 600;
    --fs-h6: 0.875rem;  --lh-h6: 1.4;   --fw-h6: 600;
    --fs-body: 1rem;    --lh-body: 1.55;
    --fs-label: 0.8125rem; --fw-label: 600;
    --fs-caption: 0.75rem;
    --fs-metric: 1.5rem;   /* valor energético monoespaciado */

    /* ----- Espaciado (escala 4px) ----- */
    --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
    --space-4: 1rem;     --space-5: 1.5rem;  --space-6: 2rem;
    --space-7: 3rem;     --space-8: 4rem;

    /* ----- Radios ----- */
    --radius-sm: 4px;  --radius-md: 8px;  --radius-lg: 12px;  --radius-pill: 999px;

    /* ----- Sombras ----- */
    --shadow-sm: 0 1px 2px rgba(11, 61, 110, 0.08);
    --shadow-md: 0 3px 8px rgba(11, 61, 110, 0.12);
    --shadow-lg: 0 10px 24px rgba(11, 61, 110, 0.18);

    /* ----- Foco visible (accesibilidad) ----- */
    --focus-ring: 0 0 0 3px rgba(26, 95, 158, 0.45);

    /* ----- Layout ----- */
    --header-height: 60px;
    --sidebar-width: 248px;
    --sidebar-width-collapsed: 64px;
    --content-max: 1440px;

    /* ----- Transiciones ----- */
    --transition-fast: 120ms ease;
    --transition-base: 200ms ease;
}

/* ----- Breakpoints de referencia (mobile-first) -----
   320px  → móvil pequeño (base, sin media query)
   768px  → tablet
   1024px → desktop
   1440px → desktop amplio
   Se implementan con min-width en components.css / páginas. */

/* ----- Modo oscuro opcional (respeta preferencia del sistema) ----- */
@media (prefers-color-scheme: dark) {
    :root.sb-theme-auto {
        --color-bg:          #0E1621;
        --color-surface:     #16212E;
        --color-surface-alt: #1E2C3B;
        --color-border:      #2C3E50;
        --color-text:        #E7EDF3;
        --color-text-muted:  #9FB0C0;
    }
}