/* ============================================================
   Magnum Design Tokens v5
   Relace-inspired warm minimal — cream, dark, gold
   3-color discipline: #fffef2 / #191918 / #fcaa2d
   ============================================================ */

/* ── Parabole Font Faces ── */
@font-face { font-family: 'Parabole Display'; src: url('../fonts/parabole-display.woff2') format('woff2'); font-display: swap; font-style: normal; font-weight: 400; }
@font-face { font-family: 'Parabole Text'; src: url('../fonts/parabole-text.woff2') format('woff2'); font-display: swap; font-style: normal; font-weight: 400; }
@font-face { font-family: 'Parabole Text'; src: url('../fonts/parabole-text-medium.woff2') format('woff2'); font-display: swap; font-style: normal; font-weight: 500; }
@font-face { font-family: 'Parabole Text'; src: url('../fonts/parabole-text-bold.woff2') format('woff2'); font-display: swap; font-style: normal; font-weight: 700; }

:root {
  /* ── Background Layers (warm cream) ── */
  --df-bg-deepest:    #f3f2e7;
  --df-bg-base:       #fffef2;
  --df-bg-surface:    #fffef2;
  --df-bg-elevated:   #f3f2e7;
  --df-bg-hover:      #eceadf;

  /* ── Accent Surfaces ── */
  --df-bg-light:      #f3f2e7;
  --df-bg-white:      #fffef2;
  --df-bg-light-warm: #eceadf;
  --df-bg-cream:      #f3f2e7;

  /* ── Accent: Warm Gold ── */
  /* Legacy: --df-blue tokens store gold values from palette v2. Use --df-accent aliases in new code. */
  --df-blue:          #fcaa2d;
  --df-blue-bright:   #fdba4d;
  --df-blue-dim:      #e89a1f;
  --df-blue-deep:     #d48a15;
  --df-blue-glow:     rgba(252, 170, 45, 0.10);
  --df-blue-border:   rgba(252, 170, 45, 0.25);
  --df-blue-subtle:   rgba(252, 170, 45, 0.08);
  /* Semantic aliases (preferred) */
  --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);

  /* ── Status (functional only, never decorative) ── */
  --df-green:         #16A34A;
  --df-green-bright:  #22C55E;
  --df-green-glow:    rgba(22, 163, 74, 0.08);
  --df-red:           #DC2626;
  --df-red-glow:      rgba(220, 38, 38, 0.08);
  --df-amber:         #fcaa2d;
  --df-amber-dim:     #e89a1f;
  --df-amber-glow:    rgba(252, 170, 45, 0.10);

  /* ── Text (warm near-black) ── */
  --df-text-primary:  #191918;
  --df-text-secondary: rgba(25, 25, 24, 0.7);
  --df-text-tertiary:  rgba(25, 25, 24, 0.5);
  --df-text-muted:     rgba(25, 25, 24, 0.3);

  /* ── Borders (warm) ── */
  --df-border:        #e3e2d8;
  --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 (warm-tinted) ── */
  --df-shadow-xs:     0 1px 2px rgba(25, 25, 24, 0.04);
  --df-shadow-sm:     0 1px 3px rgba(25, 25, 24, 0.06), 0 1px 2px rgba(25, 25, 24, 0.04);
  --df-shadow:        0 4px 12px rgba(25, 25, 24, 0.06);
  --df-shadow-md:     0 8px 24px rgba(25, 25, 24, 0.08);
  --df-shadow-lg:     0 16px 40px rgba(25, 25, 24, 0.10);
  --df-shadow-blue:   0 4px 20px rgba(252, 170, 45, 0.15);
  --df-shadow-blue-lg:0 8px 40px rgba(252, 170, 45, 0.20);

  /* ── Typography ── */
  --df-font-headline: 'Parabole Display', 'Space Grotesk', -apple-system, 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 ── */
  --df-text-display:  clamp(2.25rem, 4vw, 3.25rem);
  --df-text-display-2:clamp(1.375rem, 2.2vw, 1.625rem);
  --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:     1.0625rem;
  --df-text-small:    0.9375rem;
  --df-text-micro:    0.8125rem;
  --df-text-nano:     0.75rem;

  /* ── Letter Spacing ── */
  --df-tracking-tight:  -0.03em;
  --df-tracking-tighter:-0.05em;
  --df-tracking-wide:   0.04em;

  /* ── 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 (Relace: near-square) ── */
  --df-radius-xs:  1px;
  --df-radius-sm:  2px;
  --df-radius:     4px;
  --df-radius-md:  4px;
  --df-radius-lg:  4px;
  --df-radius-xl:  8px;
  --df-radius-2xl: 8px;
  --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;
}