/* ============================================================
   Derek Design Tokens v1
   Magnum-derived warm minimal — cream, dark, gold
   3-color discipline: #fffef2 / #191918 / #FFB923
   (Wenli design-system pass 2026-06-11: one warm-green hue family
   across sidebar/canvas/tints — no more warm-vs-cool mixing;
   marigold #FFB923 accent.)
   ============================================================ */

/* Headlines now use Inter (Parabole Display removed 2026-06-08 — poor readability). */

:root {
  /* ── Background Layers (warm cream) ── */
  --df-bg-deepest:    #EEEFE3;
  --df-bg-base:       #F8F9F0;
  --df-bg-surface:    #F8F9F0;

  /* 2026-06-10 Thor-elevation prototype (Aaron): neutral near-white canvas,
     cards stay white — single-token revert to #ffffff */
  --dk-canvas:        #F8F9F0;
  --df-bg-elevated:   #EFF0E5;
  --df-bg-hover:      #E7E8DB;

  /* ── Accent Surfaces ── */
  --df-bg-light:      #EFF0E5;
  --df-bg-white:      #FFFFFF;
  --df-bg-light-warm: #E7E8DB;
  --df-bg-cream:      #EFF0E5;

  /* ── Accent: Warm Gold ── */
  --df-blue:          #FFB923;
  --df-blue-bright:   #FFC547;
  --df-blue-dim:      #E8A41C;
  --df-blue-deep:     #C8910C;
  --df-blue-glow:     rgba(255, 185, 35, 0.10);
  --df-blue-border:   rgba(255, 185, 35, 0.25);
  --df-blue-subtle:   rgba(255, 185, 35, 0.08);
  --df-accent:        var(--df-blue);
  --df-accent-bright: var(--df-blue-bright);
  --df-accent-dim:    var(--df-blue-dim);
  --df-accent-glow:   var(--df-blue-glow);
  --df-accent-border: var(--df-blue-border);
  --df-accent-subtle: var(--df-blue-subtle);
  --df-accent-text:   #8A5E07;

  /* ── Status (functional only) ── */
  --df-green:         #16A34A;
  --df-green-bright:  #22C55E;
  --df-green-glow:    rgba(22, 163, 74, 0.08);
  --df-green-text:    #15803d;
  --df-red:           #DC2626;
  --df-red-glow:      rgba(220, 38, 38, 0.08);
  --df-amber:         #FFB923;
  --df-amber-dim:     #E8A41C;
  --df-amber-glow:    rgba(255, 185, 35, 0.10);

  /* ── Text ── */
  --df-text-primary:  #191918;
  --df-text-secondary: rgba(25, 25, 24, 0.85);
  --df-text-tertiary:  rgba(25, 25, 24, 0.78);
  --df-text-muted:     rgba(25, 25, 24, 0.70);

  /* ── Borders ── */
  --df-border:        #DEDFD7;
  --df-border-2:      rgba(209, 208, 198, 0.6);
  --df-border-3:      rgba(209, 208, 198, 0.8);
  --df-border-light:  rgba(209, 208, 198, 0.3);
  --df-border-light-2:rgba(209, 208, 198, 0.4);

  /* ── Shadows (Wenli: hairline + 4% opacity, NO heavy shadows) ── */
  --df-shadow-xs:     0 1px 2px rgba(25, 25, 24, 0.03);
  --df-shadow-sm:     0 1px 3px rgba(25, 25, 24, 0.06), 0 1px 2px rgba(25, 25, 24, 0.04);
  --df-shadow:        0 1px 3px rgba(25, 25, 24, 0.05), 0 4px 12px rgba(25, 25, 24, 0.06);
  --df-shadow-md:     0 1px 3px rgba(25, 25, 24, 0.04), 0 8px 24px rgba(25, 25, 24, 0.05);
  --df-shadow-lg:     0 1px 4px rgba(25, 25, 24, 0.04), 0 12px 32px rgba(25, 25, 24, 0.06);
  --df-shadow-blue:   0 4px 16px rgba(255, 185, 35, 0.10);
  --df-shadow-blue-lg:0 8px 32px rgba(255, 185, 35, 0.12);

  /* ── Typography ── */
  --df-font-headline: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --df-font-display:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-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 (Wenli-elevated: larger hero, tighter headings) ── */
  --df-text-display:  clamp(2.5rem, 5vw, 3.5rem);
  --df-text-display-2:clamp(1.5rem, 2.4vw, 1.75rem);
  --df-text-h1:       clamp(1.875rem, 3vw, 2.5rem);
  --df-text-h2:       clamp(1.5rem, 2.2vw, 2rem);
  --df-text-h3:       1.375rem;
  --df-text-h4:       1.125rem;
  --df-text-body:     1rem;
  --df-text-small:    0.875rem;
  --df-text-micro:    0.8125rem;
  --df-text-nano:     0.6875rem;

  /* ── Letter Spacing (tighter headings, wider labels) ── */
  --df-tracking-tight:  -0.02em;
  --df-tracking-tighter:-0.03em;
  --df-tracking-wide:   0.06em;

  /* ── Line Heights (Wenli: titles 1.1-1.2, body 1.6) ── */
  --df-leading-tight: 1.1;
  --df-leading-snug:  1.25;
  --df-leading-normal:1.6;
  --df-leading-relaxed:1.7;

  /* ── Font Weights (Wenli: 500-600 preferred, no heavy 700 on titles) ── */
  --df-weight-normal:  400;
  --df-weight-medium:  500;
  --df-weight-semibold:600;
  --df-weight-bold:    600;

  /* ── 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 (Wenli-elevated: cards 8px, buttons pill) ── */
  --df-radius-xs:  2px;
  --df-radius-sm:  4px;
  --df-radius:     6px;
  --df-radius-md:  8px;
  --df-radius-lg:  10px;
  --df-radius-xl:  12px;
  --df-radius-2xl: 12px;
  --df-radius-full:9999px;

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

  /* ── Transitions (Wenli: smooth ease-out, no bounce) ── */
  --df-ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --df-ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --df-ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --df-ease-bounce:  cubic-bezier(0.22, 1, 0.36, 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;

  /* ── Derek PE/VC Aliases ── */
  --dk-bg-base:       var(--df-bg-base);
  --dk-bg-surface:    var(--df-bg-surface);
  --dk-bg-elevated:   var(--df-bg-elevated);
  --dk-bg-hover:      var(--df-bg-hover);
  --dk-bg-card:       #faf9f0;
  --dk-bg-warm:       #faf9f0;
  --dk-text:          var(--df-text-primary);
  --dk-text-secondary:var(--df-text-secondary);
  --dk-text-muted:    var(--df-text-muted);
  --dk-accent:        var(--df-accent);
  --dk-border:        var(--df-border);
  /* Deep ink for institutional gravitas (sparingly) */
  --dk-ink:           #2a2927;
  --dk-ink-subtle:    rgba(42, 41, 39, 0.06);

  /* ── Premium Execution Tokens (Wenli Mode-A elevation) ── */
  --df-text-kpi:        2rem;
  --df-text-label:      0.6875rem;
  --df-leading-kpi:     1.0;
  --df-tracking-label:  0.08em;
  --df-shadow-institutional: 0 1px 0 rgba(25, 25, 24, 0.06);
  --df-border-hairline: rgba(25, 25, 24, 0.06);
  --df-ease-reveal:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --df-bg-surface-2:    #f8f7ee;

  /* ── Elevated Page-Header tokens (premium "page zone") ── */
  --df-header-surface:  #ffffff;             /* page-header surface — white on #F8F9F0 canvas creates a subtle 'page zone' band (same technique Thor uses: white cards on #f8fafc). boss 2026-06-09: hierarchy through typography + hairline + gold tab, never a tinted band; the white-vs-canvas contrast provides the structural anchor without color. */
  --df-header-pad-x:    var(--df-space-8);  /* 32px — MUST match .dk-content horizontal padding (bleed) */
  --df-tracking-meta:   0.04em;             /* JetBrains Mono meta row */
  --df-weight-meta:     500;                /* meta row: heavier than body, lighter than label */
  --df-meta-dot-size:   3px;                /* dot separator in meta rows */

  /* ── Performance Tier Colors (from Derek2) ── */
  --dk-tier-top:      #1e5c38;
  --dk-tier-top-bg:   rgba(30, 92, 56, 0.08);
  --dk-tier-top-border: #3d8a5e;
  --dk-tier-moderate:  #b8860b;
  --dk-tier-moderate-bg: rgba(184, 134, 11, 0.08);
  --dk-tier-moderate-border: #e8b84a;
  --dk-tier-below:    #c46520;
  --dk-tier-below-bg: rgba(196, 101, 32, 0.08);
  --dk-tier-below-border: #d4874a;
  --dk-tier-loss:     #6b2e1e;
  --dk-tier-loss-bg:  rgba(107, 46, 30, 0.08);
  --dk-tier-loss-border: #a0684a;

  /* ── Dark Surfaces (sidebar, hero, CTA) ── */
  --dk-dark-1:  #191918;
  --dk-dark-2:  #1f1f1e;
  --dk-dark-3:  #2a2a29;
  --dk-dark-4:  #111110;

  /* ── Text on Dark Backgrounds ── */
  --dk-text-on-dark: #fffef2;
  --dk-text-on-dark-muted: rgba(255, 254, 242, 0.72);
  --dk-text-on-dark-tertiary: rgba(255, 254, 242, 0.70);

  /* ── Fund Status ── */
  --dk-status-investing: var(--df-accent);
  --dk-status-harvesting: var(--dk-tier-top);
  --dk-status-raising: var(--df-accent);
  --dk-status-realized: var(--df-text-muted);
}