/**
 * HomeUni — CSS Custom Properties & Design Tokens
 * Monochromatic Navy Sea Blue — Light Theme Default
 */

:root {
  /* === Brand Colors: Navy Sea Blue === */
  --hu-primary:        #1565C0;
  --hu-primary-light:  #1976D2;
  --hu-primary-dark:   #0D47A1;
  --hu-primary-pale:   #E3F2FD;
  --hu-primary-mid:    #BBDEFB;

  /* --hu-gold aliases kept for legacy JS compatibility */
  --hu-gold:           #1565C0;
  --hu-gold-light:     #1976D2;
  --hu-gold-dim:       #0D47A1;
  --hu-gold-dark:      #0D47A1;
  --hu-gold-pale:      rgba(21, 101, 192, 0.10);
  --hu-gold-glow:      rgba(21, 101, 192, 0.20);

  /* Legacy navy vars pointing to dark blue */
  --hu-navy:           #0A1628;
  --hu-navy-mid:       #0D1E33;
  --hu-navy-light:     #112240;
  --hu-navy-elevated:  #172E50;
  --hu-navy-border:    #1E3A5F;

  /* === Semantic Colors — LIGHT MODE (default) === */
  --hu-bg-base:        #F8FAFC;
  --hu-bg-surface:     #FFFFFF;
  --hu-bg-elevated:    #FFFFFF;
  --hu-bg-overlay:     #F1F5F9;

  --hu-surface:        #FFFFFF;
  --hu-border:         #E2E8F0;
  --hu-border-subtle:  rgba(0, 0, 0, 0.05);
  --hu-border-focus:   #1565C0;

  --hu-text-primary:   #0A1628;
  --hu-text-secondary: #475569;
  --hu-text-muted:     #94A3B8;
  --hu-text-inverse:   #FFFFFF;
  --hu-text-gold:      #1565C0;

  /* === Status Colors === */
  --hu-success:        #16A34A;
  --hu-success-bg:     rgba(22, 163, 74, 0.10);
  --hu-success-border: rgba(22, 163, 74, 0.25);

  --hu-warning:        #D97706;
  --hu-warning-bg:     rgba(217, 119, 6, 0.10);
  --hu-warning-border: rgba(217, 119, 6, 0.25);

  --hu-error:          #DC2626;
  --hu-error-bg:       rgba(220, 38, 38, 0.10);
  --hu-error-border:   rgba(220, 38, 38, 0.25);

  --hu-info:           #1565C0;
  --hu-info-bg:        rgba(21, 101, 192, 0.08);
  --hu-info-border:    rgba(21, 101, 192, 0.20);

  /* === Gradients === */
  --hu-gradient-gold:    linear-gradient(135deg, #1565C0 0%, #1976D2 100%);
  --hu-gradient-dark:    linear-gradient(180deg, #0D47A1 0%, #1565C0 100%);
  --hu-gradient-surface: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
  --hu-gradient-hero:    linear-gradient(135deg, #0A1628 0%, #0D47A1 60%, #1565C0 100%);

  /* === Shadows (light theme) === */
  --hu-shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08);
  --hu-shadow-md:   0 4px 12px rgba(0, 0, 0, 0.10);
  --hu-shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.12);
  --hu-shadow-xl:   0 16px 48px rgba(0, 0, 0, 0.15);
  --hu-shadow-gold: 0 4px 20px rgba(21, 101, 192, 0.20);
  --hu-shadow-glow: 0 0 40px rgba(21, 101, 192, 0.15);

  /* === Typography === */
  --hu-font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --hu-font-mono:  'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --hu-text-xs:    0.75rem;
  --hu-text-sm:    0.875rem;
  --hu-text-base:  1rem;
  --hu-text-lg:    1.125rem;
  --hu-text-xl:    1.25rem;
  --hu-text-2xl:   1.5rem;
  --hu-text-3xl:   1.875rem;
  --hu-text-4xl:   2.25rem;

  --hu-font-normal:   400;
  --hu-font-medium:   500;
  --hu-font-semibold: 600;
  --hu-font-bold:     700;

  --hu-leading-tight:   1.25;
  --hu-leading-normal:  1.5;
  --hu-leading-relaxed: 1.75;

  /* === Spacing === */
  --hu-space-1:  0.25rem;
  --hu-space-2:  0.5rem;
  --hu-space-3:  0.75rem;
  --hu-space-4:  1rem;
  --hu-space-5:  1.25rem;
  --hu-space-6:  1.5rem;
  --hu-space-8:  2rem;
  --hu-space-10: 2.5rem;
  --hu-space-12: 3rem;
  --hu-space-16: 4rem;

  /* === Border Radius === */
  --hu-radius-sm:  0.375rem;
  --hu-radius-md:  0.5rem;
  --hu-radius-lg:  0.75rem;
  --hu-radius-xl:  1rem;
  --hu-radius-2xl: 1.5rem;
  --hu-radius-full: 9999px;

  /* === Layout === */
  --hu-sidebar-width:     260px;
  --hu-sidebar-collapsed: 72px;
  --hu-header-height:     64px;
  --hu-content-max-width: 1400px;

  /* === Transitions === */
  --hu-transition-fast:  150ms ease;
  --hu-transition-base:  250ms ease;
  --hu-transition-slow:  400ms ease;

  /* === Z-index Scale === */
  --hu-z-base:     0;
  --hu-z-raised:   10;
  --hu-z-dropdown: 100;
  --hu-z-sticky:   300;
  --hu-z-overlay:  400;
  --hu-z-modal:    500;
  --hu-z-toast:    600;
  --hu-z-tooltip:  700;
}

/* ── Dark Mode Override ─────────────────────────────── */
.hu-dark {
  --hu-bg-base:        #0A1628;
  --hu-bg-surface:     #0D1E33;
  --hu-bg-elevated:    #112240;
  --hu-bg-overlay:     #172E50;

  --hu-surface:        #0D1E33;
  --hu-border:         #1E3A5F;
  --hu-border-subtle:  rgba(255, 255, 255, 0.06);
  --hu-border-focus:   #1976D2;

  --hu-text-primary:   #E8F4FD;
  --hu-text-secondary: #8AB4D4;
  --hu-text-muted:     #4A7099;
  --hu-text-inverse:   #0A1628;
  --hu-text-gold:      #64B5F6;

  --hu-success-bg:     rgba(22, 163, 74, 0.15);
  --hu-warning-bg:     rgba(217, 119, 6, 0.15);
  --hu-error-bg:       rgba(220, 38, 38, 0.15);
  --hu-info-bg:        rgba(21, 101, 192, 0.15);

  --hu-shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.40);
  --hu-shadow-md:   0 4px 12px rgba(0, 0, 0, 0.50);
  --hu-shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.60);
  --hu-shadow-xl:   0 16px 48px rgba(0, 0, 0, 0.70);
}

/* Bootstrap 5 overrides */
:root {
  --bs-body-bg:               var(--hu-bg-base);
  --bs-body-color:            var(--hu-text-primary);
  --bs-border-color:          var(--hu-border);
  --bs-primary:               var(--hu-primary);
  --bs-primary-rgb:           21, 101, 192;
  --bs-secondary:             var(--hu-bg-overlay);
  --bs-dark:                  var(--hu-navy);
  --bs-link-color:            var(--hu-primary);
  --bs-link-hover-color:      var(--hu-primary-light);
  --bs-card-bg:               var(--hu-bg-elevated);
  --bs-card-border-color:     var(--hu-border);
  --bs-modal-bg:              var(--hu-bg-surface);
  --bs-modal-header-border-color: var(--hu-border);
}