/* ============================================================
   DealForge Design Tokens v2
   Premium fintech — soft dark, warm accents, never pure black
   Inspired by Mercury, Stripe, Fey, Wealthsimple
   ============================================================ */

:root {
  /* ── Background Layers (5-level depth) ──
     Soft dark gray with slight blue warmth, NOT pure black.
     #121620 is the darkest — much easier on eyes than #060d18 */
  --df-bg-deepest:    #121620;
  --df-bg-base:       #161b2e;
  --df-bg-surface:    #1c2237;
  --df-bg-elevated:   #232a42;
  --df-bg-hover:      #2a324d;

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

  /* ── Brand: Refined Blue ──
     Slightly desaturated for premium feel, not "electric" */
  --df-blue:          #4f7df5;
  --df-blue-bright:   #7da0fa;
  --df-blue-dim:      #3a68e0;
  --df-blue-deep:     #2c52c4;
  --df-blue-glow:     rgba(79, 125, 245, 0.12);
  --df-blue-border:   rgba(79, 125, 245, 0.20);
  --df-blue-subtle:   rgba(79, 125, 245, 0.07);

  /* ── Gold accent (premium IB feel) ── */
  --df-amber:         #d4a54a;
  --df-amber-dim:     #b8903d;
  --df-amber-glow:    rgba(212, 165, 74, 0.10);

  /* ── Status ── */
  --df-green:         #3ecf8e;
  --df-green-bright:  #5edba5;
  --df-green-glow:    rgba(62, 207, 142, 0.10);
  --df-red:           #e5534b;
  --df-red-glow:      rgba(229, 83, 75, 0.10);

  /* ── Text: Dark Mode (4 levels) ──
     Warmer whites — not blue-tinted, easier to read */
  --df-text-primary:  #eaedf3;
  --df-text-secondary:#a3adc2;
  --df-text-tertiary: #6e7a91;
  --df-text-muted:    #454e63;

  /* ── Text: Light Mode (marketing) ── */
  --df-text-dark:     #141927;
  --df-text-dark-2:   #1e2538;
  --df-text-dark-3:   #4b5468;
  --df-text-dark-4:   #8892a7;

  /* ── Borders ──
     Slightly more visible for better structure */
  --df-border:        rgba(255, 255, 255, 0.07);
  --df-border-2:      rgba(255, 255, 255, 0.11);
  --df-border-3:      rgba(255, 255, 255, 0.16);
  --df-border-light:  rgba(0, 0, 0, 0.07);
  --df-border-light-2:rgba(0, 0, 0, 0.11);

  /* ── Shadows (deep navy, not black) ── */
  --df-shadow-xs:     0 1px 2px rgba(10, 14, 26, 0.25);
  --df-shadow-sm:     0 1px 3px rgba(10, 14, 26, 0.30);
  --df-shadow:        0 4px 12px rgba(10, 14, 26, 0.35);
  --df-shadow-md:     0 8px 24px rgba(10, 14, 26, 0.35);
  --df-shadow-lg:     0 16px 40px rgba(10, 14, 26, 0.40);
  --df-shadow-blue:   0 4px 20px rgba(79, 125, 245, 0.15);
  --df-shadow-blue-lg:0 8px 40px rgba(79, 125, 245, 0.18);

  /* ── Light mode shadows ── */
  --df-shadow-light:  0 1px 3px rgba(10, 14, 26, 0.05), 0 1px 2px rgba(10, 14, 26, 0.03);
  --df-shadow-light-md:0 4px 16px rgba(10, 14, 26, 0.07);
  --df-shadow-light-lg:0 12px 40px rgba(10, 14, 26, 0.10);

  /* ── 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;
}