/* ================================================================
   CONTROL FOTOVOLTAICO — Design Tokens
   Source of truth: design-system/MASTER.md
   No usar valores hardcoded en componentes. Siempre var(--token).
   ================================================================ */

:root {
    /* ===== BRAND ===== */
    --brand-primary:        #1E3A8A;
    --brand-primary-hover:  #1E40AF;
    --brand-primary-active: #1D4ED8;
    --brand-secondary:      #2563EB;
    --brand-secondary-hover:#1D4ED8;
    --brand-accent:         #F59E0B;
    --brand-accent-hover:   #D97706;

    /* ===== STATUS (funcional) ===== */
    --success:      #059669;
    --success-soft: #D1FAE5;
    --warning:      #F59E0B;
    --warning-soft: #FEF3C7;
    --danger:       #DC2626;
    --danger-soft:  #FEE2E2;
    --info:         #0EA5E9;
    --info-soft:    #E0F2FE;

    /* ===== NEUTRALES (slate) ===== */
    --neutral-50:  #F8FAFC;
    --neutral-100: #F1F5F9;
    --neutral-200: #E2E8F0;
    --neutral-300: #CBD5E1;
    --neutral-400: #94A3B8;
    --neutral-500: #64748B;
    --neutral-600: #475569;
    --neutral-700: #334155;
    --neutral-800: #1E293B;
    --neutral-900: #0F172A;

    /* ===== SURFACES (semántico) ===== */
    --surface-bg:       var(--neutral-50);
    --surface-card:     #FFFFFF;
    --surface-elevated: #FFFFFF;
    --surface-overlay:  rgba(15, 23, 42, 0.6);

    /* ===== TEXT (semántico) ===== */
    --text-primary:   var(--neutral-900);
    --text-secondary: var(--neutral-600);
    --text-tertiary:  var(--neutral-500);
    --text-disabled:  var(--neutral-400);
    --text-on-brand:  #FFFFFF;
    --text-on-accent: #0F172A;

    /* ===== BORDER ===== */
    --border-default: var(--neutral-200);
    --border-strong:  var(--neutral-300);
    --border-focus:   var(--brand-secondary);

    /* ===== TYPOGRAPHY ===== */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --text-xs:   0.75rem;     /* 12 */
    --text-sm:   0.875rem;    /* 14 */
    --text-base: 1rem;        /* 16 */
    --text-lg:   1.125rem;    /* 18 */
    --text-xl:   1.25rem;     /* 20 */
    --text-2xl:  1.5rem;      /* 24 */
    --text-3xl:  1.875rem;    /* 30 */
    --text-4xl:  2.25rem;     /* 36 */

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

    --leading-tight:   1.25;
    --leading-snug:    1.375;
    --leading-normal:  1.5;
    --leading-relaxed: 1.75;

    /* ===== SPACING (4pt) ===== */
    --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;

    /* ===== RADIUS ===== */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* ===== SHADOW ===== */
    --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.10), 0 2px 4px -2px rgb(15 23 42 / 0.05);
    --shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.10), 0 4px 6px -4px rgb(15 23 42 / 0.05);
    --shadow-xl: 0 20px 25px -5px rgb(15 23 42 / 0.10), 0 8px 10px -6px rgb(15 23 42 / 0.05);

    /* ===== EASING / DURATION ===== */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:     cubic-bezier(0.4, 0, 1, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 400ms;

    /* ===== Z-INDEX SCALE ===== */
    --z-base:     0;
    --z-dropdown: 10;
    --z-sticky:   20;
    --z-overlay:  40;
    --z-modal:    100;
    --z-toast:    1000;

    /* ===== SAFE AREAS (móvil con notch) ===== */
    --safe-top:    env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);

    /* ===== ICON SIZES ===== */
    --icon-xs: 14px;
    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 24px;
    --icon-xl: 32px;
}

/* ===== Dark mode (opt-in con clase .dark en <html> o <body>) ===== */
.dark {
    --surface-bg:       #0F172A;
    --surface-card:     #1E293B;
    --surface-elevated: #1E293B;
    --surface-overlay:  rgba(15, 23, 42, 0.8);

    --text-primary:   #F1F5F9;
    --text-secondary: #94A3B8;
    --text-tertiary:  #64748B;
    --text-disabled:  #475569;

    --border-default: #334155;
    --border-strong:  #475569;
}

/* Respeto reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}