/* ══════════════════════════════════════════════
   GESA — DESIGN TOKENS & SYSTEM VARIABLES
   Identidad Corporativa Elegante: Azul Marino & Cobalto
   ══════════════════════════════════════════════ */

:root {
  /* ─── CORPORATE BRAND PALETTE ─── */
  --color-navy-950:     #060D17;
  --color-navy-900:     #0A192F;
  --color-navy-850:     #0D203D;
  --color-navy-800:     #0F2744;
  --color-navy-700:     #17355B;
  --color-navy-600:     #1E4373;
  --color-navy-500:     #25528C;

  /* ─── PRIMARY ACCENT (Cobalt & Steel Blue) ─── */
  --color-primary:        #2563EB;
  --color-primary-dark:   #1D4ED8;
  --color-primary-hover:  #1E40AF;
  --color-primary-light:  #3B82F6;
  --color-primary-subtle: #EFF6FF;
  --color-primary-bg:     rgba(37, 99, 235, 0.08);
  --color-primary-glow:   rgba(37, 99, 235, 0.22);

  /* ─── SECONDARY ACCENT (Indigo / Violet) ─── */
  --color-accent:         #4F46E5;
  --color-accent-dark:    #4338CA;
  --color-accent-light:   #6366F1;
  --color-accent-subtle:  #EEF2FF;
  --color-accent-bg:      rgba(79, 70, 229, 0.08);

  /* ─── SURFACES & BACKGROUNDS (Light Corporate Clean) ─── */
  --color-bg-base:        #F8FAFC;
  --color-bg-surface:     #FFFFFF;
  --color-bg-subtle:      #F1F5F9;
  --color-bg-card:        #FFFFFF;
  --color-bg-card-hover:  #F8FAFC;
  --color-bg-input:       #FFFFFF;
  --color-bg-hover:       #F1F5F9;
  --color-bg-alt:         #F8FAFC;

  /* ─── SIDEBAR SPECIFIC (Deep Navy Shell) ─── */
  --color-sidebar-bg:       #0A192F;
  --color-sidebar-surface:  #0F2744;
  --color-sidebar-border:   rgba(255, 255, 255, 0.08);
  --color-sidebar-item:     #94A3B8;
  --color-sidebar-item-hover: #FFFFFF;
  --color-sidebar-item-bg-hover: rgba(255, 255, 255, 0.06);
  --color-sidebar-active:   #FFFFFF;
  --color-sidebar-active-bg: #2563EB;

  /* ─── TEXT HIERARCHY (Graphite & Slate) ─── */
  --color-text-primary:   #0F172A;
  --color-text-secondary: #334155;
  --color-text-muted:     #64748B;
  --color-text-disabled:  #94A3B8;
  --color-text-accent:    #2563EB;
  --color-text-inverse:   #FFFFFF;

  /* ─── BORDERS & DIVIDERS ─── */
  --color-border:          #E2E8F0;
  --color-border-subtle:   #F1F5F9;
  --color-border-strong:   #CBD5E1;
  --color-border-focus:    #2563EB;

  /* ─── SEMANTIC & FEEDBACK ─── */
  --color-success:         #059669;
  --color-success-dark:    #047857;
  --color-success-bg:      #ECFDF5;
  --color-success-border:  #A7F3D0;

  --color-warning:         #D97706;
  --color-warning-dark:    #B45309;
  --color-warning-bg:      #FFFBEB;
  --color-warning-border:  #FDE68A;

  --color-danger:          #DC2626;
  --color-danger-dark:     #B91C1C;
  --color-danger-bg:       #FEF2F2;
  --color-danger-border:   #FECACA;

  --color-info:            #0284C7;
  --color-info-dark:       #0369A1;
  --color-info-bg:         #F0F9FF;
  --color-info-border:     #BAE6FD;

  --color-purple:          #7C3AED;
  --color-purple-bg:       #F5F3FF;
  --color-purple-border:   #DDD6FE;

  --color-orange:          #EA580C;
  --color-orange-bg:       #FFF7ED;
  --color-orange-border:   #FED7AA;

  /* ─── LAYOUT DIMENSIONS ─── */
  --sidebar-width:           264px;
  --sidebar-width-collapsed: 72px;
  --topbar-height:           64px;

  /* ─── SPACING TOKENS ─── */
  --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 RADII ─── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ─── SOFT CORPORATE SHADOWS ─── */
  --shadow-xs:    0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm:    0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:    0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg:    0 10px 15px -3px rgba(15, 23, 42, 0.07), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
  --shadow-xl:    0 20px 25px -5px rgba(15, 23, 42, 0.09), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --shadow-card:  0 1px 3px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.03);
  --shadow-card-hover: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 12px 24px -4px rgba(15, 23, 42, 0.07);
  --shadow-modal: 0 20px 25px -5px rgba(15, 23, 42, 0.18), 0 10px 10px -5px rgba(15, 23, 42, 0.08);
  --shadow-dropdown: 0 10px 20px -3px rgba(15, 23, 42, 0.12), 0 4px 6px -2px rgba(15, 23, 42, 0.05);

  /* ─── TYPOGRAPHY ─── */
  --font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13.5px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;

  /* ─── MICRO-INTERACTION TRANSITIONS ─── */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 280ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ─── Z-INDEX ─── */
  --z-under:    -1;
  --z-base:      1;
  --z-sidebar: 100;
  --z-topbar:  200;
  --z-dropdown: 500;
  --z-modal:  1000;
  --z-toast:  2000;
}