/* ===== DESIGN TOKENS ===== */
:root {
  /* Surfaces */
  --bg: #09090b;
  --bg-soft: #0c0c0e;
  --surface: #18181b;
  --surface-2: #1e1e21;
  --surface-glass: rgba(20, 20, 22, 0.70);
  --surface-glass-strong: rgba(15, 15, 17, 0.82);
  --surface-glass-light: rgba(255, 255, 255, 0.04);

  /* Borders */
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-soft: rgba(255, 255, 255, 0.06);

  /* Text */
  --text: #f4f4f5;
  --text-soft: #d4d4d8;
  --muted: #a1a1aa;
  --muted-2: #71717a;

  /* Accent — restrained, near-neutral warm gray, used sparingly */
  --accent: #c9a876;
  --accent-soft: rgba(201, 168, 118, 0.14);
  --accent-line: rgba(201, 168, 118, 0.35);

  /* Radii */
  --radius-xl: 32px;
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --radius-xs: 10px;

  /* Shadows */
  --shadow-panel: 0 20px 60px -20px rgba(0, 0, 0, 0.6), 0 4px 20px -4px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 12px 36px -12px rgba(0, 0, 0, 0.55);
  --shadow-soft: 0 2px 12px -2px rgba(0, 0, 0, 0.35);

  /* Blur */
  --blur-panel: 20px;
  --blur-nav: 16px;

  /* Type */
  --font-display: 'Neue Montreal', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur-base: 320ms;
  --dur-slow: 500ms;

  /* Layout */
  --container: 1360px;
  --container-narrow: 920px;
  --gutter: clamp(20px, 4vw, 56px);
  --header-h: 84px;
}

@media (max-width: 720px) {
  :root {
    --radius-xl: 24px;
    --radius-lg: 20px;
    --radius-md: 16px;
    --header-h: 64px;
  }
}