/**
 * Variables & Design Tokens — AJBranch SaaS Theme
 * Base: #EEEBD9 (Warm Cream), #F5F5F5 (Light Sidebar), #2C2C2C (Text), #0B0B0B (Deep Dark)
 * Accent: #C9A227 (Institutional Gold with Ambient Glow)
 * Borders: 0px (Straight Sharp Architectural Cut)
 * Typography: Urbanist (Total UI & Tabular Numbers)
 * WCAG 2.2 AA Contrast Compliant
 */

:root {
  /* ─── Typography ─── */
  --font-sans: 'Urbanist', system-ui, -apple-system, sans-serif;
  --font-mono: 'Urbanist', system-ui, -apple-system, sans-serif;
  --font-heading: 'Urbanist', system-ui, -apple-system, sans-serif;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;

  /* ─── Spacing Scale (4px) ─── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;

  /* ─── Zero Radius (Bordes Rectos) ─── */
  --radius-xs: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-full: 0px;

  /* ─── Layout & Accessibility ─── */
  --content-max-width: 1400px;
  --touch-target-min: 44px;

  /* ─── Institutional Gold Accent & Glow ─── */
  --accent-gold:        #C9A227;
  --accent-gold-hover:  #b38f20;
  --accent-gold-light:  rgba(201, 162, 39, 0.15);
  --glow-gold:          0 0 14px rgba(201, 162, 39, 0.55);
  --glow-gold-subtle:   0 0 8px rgba(201, 162, 39, 0.35);

  /* ─── Motion ─── */
  --transition-fast:   all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* ═══════════════════════════════════════════════════════════════
     LIGHT THEME (Default) — Clean Institutional Warm Light & Wine
     ═══════════════════════════════════════════════════════════════ */
  --bg-app:            #eeebd9;
  --bg-sidebar:        #6C0F1A;
  --bg-sidebar-hover:  rgba(255, 255, 255, 0.14);
  --bg-sidebar-active: rgba(255, 255, 255, 0.24);
  --bg-sidebar-item:   rgba(0, 0, 0, 0.24);
  --bg-sidebar-item-hover: rgba(255, 255, 255, 0.16);
  --border-sidebar-item: rgba(255, 255, 255, 0.20);
  --bg-surface:        #e5e1cd;
  --bg-surface-elevated: #faf8f2;
  --bg-card:           #faf8f2;
  --bg-card-hover:     #f3efe3;
  --bg-input:          #ffffff;

  /* Text & Icons (WCAG 2.2 AA Contrast Compliant) */
  --text-primary:       #1f1d1b;
  --text-secondary:     #3d3936;
  --text-muted:         #56514d;
  --text-sidebar:       #ffffff;
  --text-sidebar-muted: rgba(255, 255, 255, 0.85);
  --icon-color:         #1f1d1b;

  /* Primary Action Buttons */
  --primary-navy:       #18181b;
  --primary-navy-hover: #000000;
  --primary-cream:      #faf8f2;

  /* Borders & Elevation */
  --border-subtle:   rgba(44, 44, 44, 0.14);
  --border-strong:   rgba(44, 44, 44, 0.28);
  --border-color:    rgba(44, 44, 44, 0.28);
  --border-hairline: 1px solid var(--border-subtle);
  --border-focus:    #C9A227;
  --border-glow:     rgba(201, 162, 39, 0.40);
  --elevation-1:     0 1px 3px rgba(31, 29, 27, 0.08);
  --elevation-2:     var(--glow-gold);

  /* Status Colors */
  --status-cyan:    #0369a1;
  --status-emerald: #15803d;
  --status-amber:   #b45309;
  --status-crimson: #be123c;

  --badge-cyan-bg:    rgba(3, 105, 161, 0.12);
  --badge-emerald-bg: rgba(21, 128, 61,  0.12);
  --badge-amber-bg:   rgba(180, 83, 9,   0.12);
  --badge-crimson-bg: rgba(190, 18, 60,  0.12);
}

/* Explicit Light Theme Selector */
[data-theme="light"] {
  --bg-app:            #eeebd9;
  --bg-sidebar:        #6C0F1A;
  --bg-sidebar-hover:  rgba(255, 255, 255, 0.14);
  --bg-sidebar-active: rgba(255, 255, 255, 0.24);
  --bg-sidebar-item:   rgba(0, 0, 0, 0.24);
  --bg-sidebar-item-hover: rgba(255, 255, 255, 0.16);
  --border-sidebar-item: rgba(255, 255, 255, 0.20);
  --bg-surface:        #e5e1cd;
  --bg-surface-elevated: #faf8f2;
  --bg-card:           #faf8f2;
  --bg-card-hover:     #f3efe3;
  --bg-input:          #ffffff;

  --text-primary:       #1f1d1b;
  --text-secondary:     #3d3936;
  --text-muted:         #56514d;
  --text-sidebar:       #ffffff;
  --text-sidebar-muted: rgba(255, 255, 255, 0.85);
  --icon-color:         #1f1d1b;

  --primary-navy:       #18181b;
  --primary-navy-hover: #000000;
  --primary-cream:      #faf8f2;

  --border-subtle:   rgba(44, 44, 44, 0.14);
  --border-strong:   rgba(44, 44, 44, 0.28);
  --border-color:    rgba(44, 44, 44, 0.28);
  --border-hairline: 1px solid var(--border-subtle);
  --border-focus:    #C9A227;
  --border-glow:     rgba(201, 162, 39, 0.40);
  --elevation-1:     0 1px 3px rgba(31, 29, 27, 0.08);

  --status-cyan:    #0369a1;
  --status-emerald: #15803d;
  --status-amber:   #b45309;
  --status-crimson: #be123c;

  --badge-cyan-bg:    rgba(3, 105, 161, 0.12);
  --badge-emerald-bg: rgba(21, 128, 61,  0.12);
  --badge-amber-bg:   rgba(180, 83, 9,   0.12);
  --badge-crimson-bg: rgba(190, 18, 60,  0.12);
}

/* ═══════════════════════════════════════════════════════════════
   DARK THEME — Deep Monochromatic Dark with Gold Accents
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg-app:            #121214;
  --bg-sidebar:        #18181b;
  --bg-sidebar-hover:  rgba(201, 162, 39, 0.15);
  --bg-sidebar-active: rgba(201, 162, 39, 0.25);
  --bg-sidebar-item:   #1f1f23;
  --bg-sidebar-item-hover: #27272d;
  --border-sidebar-item: rgba(243, 242, 238, 0.12);
  --bg-surface:        #1f1f23;
  --bg-surface-elevated: #242429;
  --bg-card:           #242429;
  --bg-card-hover:     #2c2c33;
  --bg-input:          #18181b;

  --text-primary:        #f3f2ee;
  --text-secondary:      #d1cfc7;
  --text-muted:          #99958c;
  --text-sidebar:        #f3f2ee;
  --text-sidebar-muted:  #a09d94;
  --icon-color:          #f3f2ee;

  --primary-navy:       #f3f2ee;
  --primary-navy-hover: #ffffff;
  --primary-cream:      #121214;

  --border-subtle:   rgba(243, 242, 238, 0.12);
  --border-strong:   rgba(243, 242, 238, 0.24);
  --border-color:    rgba(243, 242, 238, 0.24);
  --border-hairline: 1px solid var(--border-subtle);
  --border-focus:    #C9A227;
  --border-glow:     rgba(201, 162, 39, 0.40);
  --elevation-1:     0 1px 3px rgba(0, 0, 0, 0.35);

  --status-cyan:    #38bdf8;
  --status-emerald: #4ade80;
  --status-amber:   #fbbf24;
  --status-crimson: #f87171;

  --badge-cyan-bg:    rgba(56, 189, 248, 0.15);
  --badge-emerald-bg: rgba(74, 222, 128, 0.15);
  --badge-amber-bg:   rgba(251, 191, 36,  0.15);
  --badge-crimson-bg: rgba(248, 113, 113, 0.15);
}