/* ============================================================
   Design Tokens — Forge Brand Palette
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* ---- Palette (Forge) ---- */
  --color-bg-1:        #1a1a2e;
  --color-bg-2:        #1f1f35;
  --color-bg-card:     #24243c;
  --color-bg-card-hov: #2a2a44;
  --color-surface:     #323250;
  --color-text:        #e4e8ed;
  --color-text-2:      #b0b8c8;
  --color-text-muted:  #8892a4;
  --color-accent:      #D4650B;
  --color-accent-bright: #E8863A;
  --color-accent-glow: rgba(212, 101, 11, 0.18);
  --color-accent-subtle: rgba(212, 101, 11, 0.08);
  --color-accent-teal: #E8863A;
  --color-border:      rgba(255, 255, 255, 0.07);
  --color-border-hov:  rgba(212, 101, 11, 0.5);

  /* ---- Typography ---- */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', -apple-system, sans-serif;
  --font-serif: 'Inter', sans-serif;

  /* ---- Spacing (4px base) ---- */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3:  12px;  --sp-4:  16px;
  --sp-5:  20px;  --sp-6:  24px;  --sp-8:  32px;  --sp-10: 40px;
  --sp-12: 48px;  --sp-16: 64px;  --sp-20: 80px;  --sp-24: 96px;

  /* ---- Layout ---- */
  --max-width:   1320px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --nav-height:  64px;

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    150ms;
  --dur-norm:    300ms;
  --dur-slow:    600ms;
}