/* ============================================================
   DealForge Design Tokens — LIGHT PREMIUM
   Goldman Sachs annual report meets Lazard website.
   Deep navy headlines, warm ivory surfaces, muted gold accents.
   ============================================================ */

:root {
  /* ── Background Layers (light mode) ──
     Warm off-whites with the faintest blue undertone.
     NOT clinical white — think high-end printed materials */
  --df-bg-deepest:    #f5f6f9;
  --df-bg-base:       #f9fafb;
  --df-bg-surface:    #ffffff;
  --df-bg-elevated:   #f0f2f6;
  --df-bg-hover:      #e8ebf0;

  /* ── Dark surfaces (for hero, nav, app sidebar) ── */
  --df-bg-navy:       #0c1a2e;
  --df-bg-navy-light: #132240;
  --df-bg-navy-surface:#1a2d4e;

  /* ── Marketing Light Surfaces ── */
  --df-bg-light:      #f5f6f9;
  --df-bg-white:      #ffffff;
  --df-bg-light-warm: #faf9f7;

  /* ── Brand: Deep Navy Blue ──
     The IB power color — authoritative, trustworthy */
  --df-blue:          #1a3a6b;
  --df-blue-bright:   #2a5298;
  --df-blue-dim:      #122c54;
  --df-blue-deep:     #0c1f3d;
  --df-blue-glow:     rgba(26, 58, 107, 0.08);
  --df-blue-border:   rgba(26, 58, 107, 0.15);
  --df-blue-subtle:   rgba(26, 58, 107, 0.04);

  /* ── Accent blue (for interactive elements) ── */
  --df-accent:        #2563eb;
  --df-accent-bright: #3b82f6;
  --df-accent-glow:   rgba(37, 99, 235, 0.08);
  --df-accent-border: rgba(37, 99, 235, 0.20);

  /* ── Gold accent (premium IB hallmark) ── */
  --df-amber:         #b8860b;
  --df-amber-dim:     #996f09;
  --df-amber-glow:    rgba(184, 134, 11, 0.08);
  --df-amber-bright:  #d4a54a;

  /* ── Status ── */
  --df-green:         #0d9668;
  --df-green-bright:  #10b981;
  --df-green-glow:    rgba(13, 150, 104, 0.08);
  --df-red:           #dc2626;
  --df-red-glow:      rgba(220, 38, 38, 0.06);

  /* ── Text: Light Mode (primary palette) ── */
  --df-text-primary:  #0c1a2e;
  --df-text-secondary:#3d4f66;
  --df-text-tertiary: #6b7c94;
  --df-text-muted:    #9ca8b9;

  /* ── Text on dark backgrounds ── */
  --df-text-on-dark:  #eaedf3;
  --df-text-on-dark-2:#a3adc2;
  --df-text-on-dark-3:#6e7a91;
  --df-text-on-dark-4:#454e63;

  /* ── Borders ── */
  --df-border:        rgba(0, 0, 0, 0.06);
  --df-border-2:      rgba(0, 0, 0, 0.10);
  --df-border-3:      rgba(0, 0, 0, 0.15);
  --df-border-light:  rgba(0, 0, 0, 0.06);
  --df-border-light-2:rgba(0, 0, 0, 0.10);

  /* ── Shadows (subtle, blue-tinted) ── */
  --df-shadow-xs:     0 1px 2px rgba(12, 26, 46, 0.04);
  --df-shadow-sm:     0 1px 3px rgba(12, 26, 46, 0.06), 0 1px 2px rgba(12, 26, 46, 0.04);
  --df-shadow:        0 4px 12px rgba(12, 26, 46, 0.08);
  --df-shadow-md:     0 8px 24px rgba(12, 26, 46, 0.10);
  --df-shadow-lg:     0 16px 40px rgba(12, 26, 46, 0.12);
  --df-shadow-blue:   0 4px 20px rgba(26, 58, 107, 0.10);
  --df-shadow-blue-lg:0 8px 40px rgba(26, 58, 107, 0.12);

  /* ── Light mode shadows (same as main) ── */
  --df-shadow-light:  0 1px 3px rgba(12, 26, 46, 0.06), 0 1px 2px rgba(12, 26, 46, 0.04);
  --df-shadow-light-md:0 4px 16px rgba(12, 26, 46, 0.08);
  --df-shadow-light-lg:0 12px 40px rgba(12, 26, 46, 0.12);

  /* ── Typography ── */
  --df-font-display:  'DM Serif Display', Georgia, 'Times New Roman', serif;
  --df-font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --df-font-mono:     'JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', monospace;

  /* ── Type Scale ── */
  --df-text-display:  clamp(2.75rem, 5vw, 4.25rem);
  --df-text-display-2:clamp(2rem, 3.5vw, 3rem);
  --df-text-h1:       clamp(1.75rem, 3vw, 2.5rem);
  --df-text-h2:       clamp(1.375rem, 2.2vw, 1.875rem);
  --df-text-h3:       1.25rem;
  --df-text-h4:       1.0625rem;
  --df-text-body:     0.9375rem;
  --df-text-small:    0.8125rem;
  --df-text-micro:    0.75rem;
  --df-text-nano:     0.6875rem;

  /* ── Line Heights ── */
  --df-leading-tight: 1.15;
  --df-leading-snug:  1.3;
  --df-leading-normal:1.6;
  --df-leading-relaxed:1.75;

  /* ── Font Weights ── */
  --df-weight-normal:  400;
  --df-weight-medium:  500;
  --df-weight-semibold:600;
  --df-weight-bold:    700;

  /* ── Spacing (4px baseline) ── */
  --df-space-0:  0;
  --df-space-1:  4px;
  --df-space-2:  8px;
  --df-space-3:  12px;
  --df-space-4:  16px;
  --df-space-5:  20px;
  --df-space-6:  24px;
  --df-space-8:  32px;
  --df-space-10: 40px;
  --df-space-12: 48px;
  --df-space-16: 64px;
  --df-space-20: 80px;
  --df-space-24: 96px;
  --df-space-32: 128px;

  /* ── Border Radius ── */
  --df-radius-xs:  2px;
  --df-radius-sm:  4px;
  --df-radius:     6px;
  --df-radius-md:  8px;
  --df-radius-lg:  12px;
  --df-radius-xl:  16px;
  --df-radius-2xl: 20px;
  --df-radius-full:9999px;

  /* ── Layout ── */
  --df-container:    1200px;
  --df-container-sm: 960px;
  --df-container-lg: 1400px;
  --df-nav-height:   72px;
  --df-sidebar-width:280px;
  --df-topbar-height:52px;
  --df-ai-panel-width:380px;

  /* ── Transitions ── */
  --df-ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --df-ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --df-ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --df-ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --df-duration-fast:150ms;
  --df-duration:     200ms;
  --df-duration-slow:300ms;
  --df-duration-slower:500ms;

  /* ── Z-Index Scale ── */
  --df-z-base:       0;
  --df-z-elevated:   10;
  --df-z-sticky:     100;
  --df-z-overlay:    200;
  --df-z-modal:      300;
  --df-z-toast:      400;
  --df-z-tooltip:    500;
}