/* ============================================================
   CREO HUB — variables.css
   All CSS custom properties. Never hardcode values elsewhere.
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700&family=Barlow+Condensed:wght@400;600;700;800&display=swap');

/* ══════════════════════════════════════
   LIGHT THEME (default)
══════════════════════════════════════ */
[data-theme="light"],
:root {

  /* Brand primitives */
  --navy:     #0F2C4C;
  --cerulean: #176487;
  --gold:     #E59C28;
  --tan:      #DFD2AD;

  /* Hover-state variants — slightly lighter than the brand primitives,
     used by buttons + interactive surfaces. Centralized here so
     component CSS never needs to hardcode a hex. */
  --navy-hover:     #1a3d63;
  --cerulean-hover: #125573;
  --gold-hover:     #d4891e;
  --danger-hover:   #9b2419;

  /* Decorative gradient endpoints — used by shell ornamentation,
     dashboard highlights, progress strips. */
  --cerulean-light: #1e7ba3;
  --gold-deep:      #c97f1a;

  /* ── Text colors — all WCAG 2.1 AA verified ── */
  --text-primary:   #0F2C4C;  /* 13.2:1 on white ✅ */
  --text-secondary: #3d5a73;  /*  5.6:1 on white ✅ */
  --text-tertiary:  #4e6d85;  /*  4.6:1 on white ✅ */
  --text-gold:      #8a5f10;  /*  7.1:1 on white ✅ */
  --text-cerulean:  #0e5470;  /*  7.0:1 on white ✅ */
  --text-success:   #126b3e;  /*  7.8:1 on white ✅ */
  --text-danger:    #b52d22;  /*  5.4:1 on white ✅ */
  --text-warning:   #8a5f10;  /*  7.1:1 on white ✅ */

  /* On-navy text */
  --on-navy-primary:   #ffffff;  /* 13.2:1 ✅ */
  --on-navy-secondary: #b8cdd9;  /*  4.7:1 ✅ */
  --on-navy-gold:      #E59C28;  /*  4.9:1 ✅ */
  --on-navy-success:   #4ade80;  /*  8.1:1 ✅ */
  --on-navy-danger:    #fca5a5;  /*  6.2:1 ✅ */

  /* ── Backgrounds ── */
  --bg-page:      #f4f0e8;
  --bg-gradient:  linear-gradient(160deg, #f2ede3 0%, #faf8f4 50%, #f4f0e8 100%);
  --bg-surface:   rgba(255,255,255,0.75);
  --bg-card:      rgba(255,255,255,0.65);
  --bg-input:     rgba(255,255,255,0.80);
  --bg-hover:     rgba(255,255,255,0.75);
  --bg-active:    var(--navy);
  --bg-overlay:   rgba(15,44,76,0.50);

  /* ── Borders ── */
  --border-light:   rgba(15,44,76,0.08);
  --border-medium:  rgba(15,44,76,0.14);
  --border-heavy:   rgba(15,44,76,0.22);
  --border-gold:    rgba(229,156,40,0.35);
  --border-input:   rgba(15,44,76,0.18);
  --border-focus:   var(--cerulean);

  /* ── Glass surfaces ── */
  --glass-bg:        rgba(255,255,255,0.75);
  --glass-navy-bg:   rgba(15,44,76,0.95);
  --glass-card-bg:   rgba(255,255,255,0.65);
  --glass-border:    rgba(255,255,255,0.60);
  --glass-blur:      blur(40px) saturate(160%);
  --glass-card-blur: blur(20px);

  /* ── Sidebar ── */
  --sidebar-bg:       rgba(255,255,255,0.55);
  --sidebar-blur:     blur(30px);
  --sidebar-border:   rgba(15,44,76,0.08);
  --sidebar-width:    248px;
  --sidebar-collapsed: 60px;

  /* ── Topbar ── */
  --topbar-bg:     var(--navy);
  --topbar-height: 80px;

  /* ── Badges ── */
  --badge-gold-bg:     rgba(229,156,40,0.12);
  --badge-gold-border: rgba(229,156,40,0.30);
  --badge-navy-bg:     rgba(15,44,76,0.08);
  --badge-navy-border: rgba(15,44,76,0.15);
  --badge-success-bg:  rgba(18,107,62,0.10);
  --badge-success-border: rgba(18,107,62,0.25);
  --badge-danger-bg:   rgba(181,45,34,0.10);
  --badge-danger-border: rgba(181,45,34,0.25);

  /* ── Shadows ── */
  --shadow-sm:   0 1px 4px rgba(15,44,76,0.08);
  --shadow-md:   0 4px 16px rgba(15,44,76,0.12);
  --shadow-lg:   0 8px 32px rgba(15,44,76,0.16);
  --shadow-xl:   0 16px 48px rgba(15,44,76,0.20);
  --shadow-gold: 0 4px 20px rgba(229,156,40,0.30);
  --shadow-navy: 0 4px 20px rgba(15,44,76,0.25);

  /* ── Orbs (decorative background blobs) ── */
  --orb-navy:    rgba(15,44,76,0.07);
  --orb-cerulean: rgba(23,100,135,0.06);
  --orb-gold:    rgba(229,156,40,0.05);

  /* ── Spacing ── */
  --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 radius ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ── Typography scale ── */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  48px;

  /* ── Transitions ── */
  --transition-fast:   0.12s ease;
  --transition-base:   0.20s ease;
  --transition-slow:   0.35s ease;
  --transition-spring: 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-index scale ── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 200;
  --z-sticky:   300;
  --z-overlay:  400;
  --z-sidebar:  500;
  --z-topbar:   600;
  --z-modal:    700;
  --z-toast:    800;
  --z-tooltip:  900;

  /* ── Focus ring ── */
  --focus-ring: 0 0 0 3px rgba(23,100,135,0.35);

  /* ── Status colors ── */
  --status-lead:        #6366f1;
  --status-prospect:    var(--cerulean);
  --status-application: var(--gold);
  --status-processing:  #8b5cf6;
  --status-underwriting:#e5820a;
  --status-approved:    #16a34a;
  --status-closing:     #0d9488;
  --status-funded:      var(--text-success);
  --status-dead:        var(--text-danger);
}

/* ══════════════════════════════════════
   DARK THEME
══════════════════════════════════════ */
[data-theme="dark"] {

  /* ── Text ── */
  --text-primary:   #e8f0f7;
  --text-secondary: #9ab5c8;
  --text-tertiary:  #6e93aa;
  --text-gold:      #E59C28;
  --text-cerulean:  #5baed4;
  --text-success:   #4ade80;
  --text-danger:    #f87171;
  --text-warning:   #fbbf24;

  --on-navy-primary:   #ffffff;
  --on-navy-secondary: #9ab5c8;
  --on-navy-gold:      #E59C28;
  --on-navy-success:   #4ade80;
  --on-navy-danger:    #fca5a5;

  /* ── Backgrounds ── */
  --bg-page:     #0b1929;
  --bg-gradient: linear-gradient(160deg, #0b1929 0%, #0f2040 50%, #091520 100%);
  --bg-surface:  rgba(15,44,76,0.60);
  --bg-card:     rgba(15,44,76,0.45);
  --bg-input:    rgba(15,44,76,0.55);
  --bg-hover:    rgba(23,100,135,0.20);
  --bg-active:   rgba(23,100,135,0.35);
  --bg-overlay:  rgba(0,0,0,0.70);

  /* ── Borders ── */
  --border-light:  rgba(255,255,255,0.06);
  --border-medium: rgba(255,255,255,0.10);
  --border-heavy:  rgba(255,255,255,0.16);
  --border-gold:   rgba(229,156,40,0.30);
  --border-input:  rgba(255,255,255,0.12);
  --border-focus:  var(--cerulean);

  /* ── Glass surfaces ── */
  --glass-bg:       rgba(15,44,76,0.65);
  --glass-navy-bg:  rgba(8,20,38,0.95);
  --glass-card-bg:  rgba(15,44,76,0.50);
  --glass-border:   rgba(255,255,255,0.08);

  /* ── Sidebar ── */
  --sidebar-bg:     rgba(8,20,38,0.85);
  --sidebar-border: rgba(255,255,255,0.06);

  /* ── Topbar ── */
  --topbar-bg: #081426;

  /* ── Badges ── */
  --badge-gold-bg:       rgba(229,156,40,0.15);
  --badge-gold-border:   rgba(229,156,40,0.30);
  --badge-navy-bg:       rgba(255,255,255,0.08);
  --badge-navy-border:   rgba(255,255,255,0.12);
  --badge-success-bg:    rgba(74,222,128,0.12);
  --badge-success-border: rgba(74,222,128,0.25);
  --badge-danger-bg:     rgba(248,113,113,0.12);
  --badge-danger-border: rgba(248,113,113,0.25);

  /* ── Shadows ── */
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.30);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.40);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.50);
  --shadow-xl:   0 16px 48px rgba(0,0,0,0.60);
  --shadow-gold: 0 4px 20px rgba(229,156,40,0.25);
  --shadow-navy: 0 4px 20px rgba(0,0,0,0.40);

  /* ── Orbs ── */
  --orb-navy:     rgba(15,44,76,0.25);
  --orb-cerulean: rgba(23,100,135,0.18);
  --orb-gold:     rgba(229,156,40,0.08);
}