/* ==================================================================
   jByte Design System - Enterprise Modernist Theme CSS v2.0
   DNA Empresarial: Innovación Digital, Conectividad Global y Cómputo Profesional
   Colors extracted from jByte identity:
     - Primary Blue / Sky Blue: #29B6F6 / #0288D1
     - Tech Navy / Brand Dark: #003366 / #0D47A1
     - Accent Orange / Coral: #F66929 / #FF8A50
   ================================================================== */

:root {
  /* 1. SEED & BRAND PALETTE */
  --color-brand-primary-light: #29B6F6;
  --color-brand-primary: #0288D1;
  --color-brand-primary-dark: #003366;

  /* 2. COMPLEMENTARY PALETTE */
  --color-brand-complementary: #F66929;
  --color-brand-complementary-light: #FF8A50;
  --color-brand-complementary-dark: #C43E00;

  /* 3. TRIADIC & ACCENTS */
  --color-triad-green: #10B981;
  --color-triad-purple: #8B5CF6;
  --color-triad-cyan: #06B6D4;

  /* 4. NEUTRALS SCALE */
  --color-neutral-50: #F8FAFC;
  --color-neutral-100: #F1F5F9;
  --color-neutral-200: #E2E8F0;
  --color-neutral-300: #CBD5E1;
  --color-neutral-400: #94A3B8;
  --color-neutral-500: #64748B;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1E293B;
  --color-neutral-900: #0F172A;
  --color-neutral-950: #070D18;

  /* 5. SEMANTIC */
  --color-semantic-success: #10B981;
  --color-semantic-warning: #F59E0B;
  --color-semantic-danger: #EF4444;
  --color-semantic-info: #0288D1;

  /* 6. GRADIENTS */
  --gradient-primary: linear-gradient(135deg, #0288D1 0%, #003366 100%);
  --gradient-brand-glow: linear-gradient(135deg, #29B6F6 0%, #0288D1 50%, #F66929 100%);
  --gradient-accent: linear-gradient(135deg, #F66929 0%, #FF8A50 100%);
  --gradient-cyan: linear-gradient(135deg, #29B6F6 0%, #0288D1 100%);
  --gradient-dark-mesh: radial-gradient(at 10% 20%, rgba(41, 182, 246, 0.12) 0px, transparent 50%),
                        radial-gradient(at 90% 80%, rgba(246, 105, 41, 0.08) 0px, transparent 50%),
                        radial-gradient(at 50% 50%, rgba(2, 136, 209, 0.06) 0px, transparent 50%);
  --gradient-light-mesh: radial-gradient(at 10% 10%, rgba(41, 182, 246, 0.07) 0px, transparent 40%),
                         radial-gradient(at 90% 90%, rgba(246, 105, 41, 0.04) 0px, transparent 40%);

  /* 7. ELEVATION & SHADOWS */
  --shadow-sm: 0 1px 3px 0 rgba(0, 51, 102, 0.05), 0 1px 2px 0 rgba(0, 51, 102, 0.03);
  --shadow-md: 0 6px 16px -2px rgba(0, 51, 102, 0.08), 0 2px 6px -1px rgba(0, 51, 102, 0.04);
  --shadow-lg: 0 14px 28px -4px rgba(0, 51, 102, 0.1), 0 4px 10px -2px rgba(0, 51, 102, 0.05);
  --shadow-xl: 0 24px 44px -8px rgba(0, 51, 102, 0.14), 0 8px 16px -3px rgba(0, 51, 102, 0.06);
  --shadow-glow: 0 0 20px rgba(41, 182, 246, 0.3);
  --shadow-glow-orange: 0 0 20px rgba(246, 105, 41, 0.3);

  /* 8. RADIUS */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* 9. TYPOGRAPHY */
  --font-display: 'Outfit', 'Chakra Petch', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* ==============================================================
     TEMA CLARO (Default)
     ============================================================== */
  --void: #FFFFFF;
  --void-rgb: 255, 255, 255;
  --abyss: #F8FAFC;
  --abyss-rgb: 248, 250, 252;
  --surface: #FFFFFF;
  --surface-glass: rgba(255, 255, 255, 0.85);
  --surface-subtle: #F1F5F9;
  --surface-hover: #F8FAFC;
  --paper: #334155;
  --paper-muted: #64748B;
  --highlight: var(--color-brand-primary-dark);
  --highlight-rgb: 0, 51, 102;
  --pulse: #0288D1;
  --pulse-bright: #29B6F6;
  --pulse-soft: rgba(2, 136, 209, 0.08);
  --fill: #F66929;
  --fill-hover: #E0581B;
  --fill-soft: rgba(246, 105, 41, 0.08);
  --fill-glow: rgba(246, 105, 41, 0.25);
  --edge: rgba(0, 51, 102, 0.09);
  --edge-subtle: rgba(0, 51, 102, 0.05);
  --edge-hover: rgba(2, 136, 209, 0.35);
  --navbar-bg: rgba(255, 255, 255, 0.88);
  --footer-bg: #070D18;
  --footer-text: #E2E8F0;
  --card-shadow: 0 10px 24px -4px rgba(0, 51, 102, 0.06), 0 2px 6px -1px rgba(0, 51, 102, 0.03);
  --hero-gradient-overlay: linear-gradient(180deg, rgba(255,255,255,0) 0%, #FFFFFF 100%);
}

/* ==============================================================
   TEMA OSCURO (data-theme="dark")
   ============================================================== */
:root[data-theme="dark"] {
  --void: #070D18;
  --void-rgb: 7, 13, 24;
  --abyss: #0B1326;
  --abyss-rgb: 11, 19, 38;
  --surface: #0E1A33;
  --surface-glass: rgba(14, 26, 51, 0.85);
  --surface-subtle: #132242;
  --surface-hover: #192D57;
  --paper: #E2E8F0;
  --paper-muted: #94A3B8;
  --highlight: #F8FAFC;
  --highlight-rgb: 248, 250, 252;
  --pulse: #29B6F6;
  --pulse-bright: #56CCF2;
  --pulse-soft: rgba(41, 182, 246, 0.12);
  --fill: #F66929;
  --fill-hover: #FF8547;
  --fill-soft: rgba(246, 105, 41, 0.14);
  --fill-glow: rgba(246, 105, 41, 0.4);
  --edge: rgba(255, 255, 255, 0.08);
  --edge-subtle: rgba(255, 255, 255, 0.04);
  --edge-hover: rgba(41, 182, 246, 0.45);
  --navbar-bg: rgba(7, 13, 24, 0.88);
  --footer-bg: #03070D;
  --footer-text: #CBD5E1;
  --card-shadow: 0 14px 32px -6px rgba(0, 0, 0, 0.55), 0 0 1px 1px rgba(255, 255, 255, 0.06);
  --hero-gradient-overlay: linear-gradient(180deg, rgba(7,13,24,0) 0%, #070D18 100%);
}