/* ==========================================================================
   Design Tokens — Ultra Modern Dark
   ========================================================================== */

:root {
  /* Core neutrals */
  --bg-primary: #090909;
  --bg-secondary: #121212;
  --surface: #181818;
  --surface-elevated: #202020;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* Typography colors */
  --text-primary: #F5F5F5;
  --text-secondary: #C7C7C7;
  --text-muted: #9A9A9A;
  --text-dim: #6F6F6F;

  /* Brand metallic tones */
  --silver-light: #E3E3E3;
  --silver-mid: #B8B8B8;
  --silver-dark: #8F8F8F;

  /* Accent colors — use sparingly */
  --accent-red: #D9292F;
  --accent-blue: #1D4F91;
  --accent-champagne: #C7B08A;

  /* Border radius */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.28);
  --shadow-elevated: 0 18px 50px rgba(0, 0, 0, 0.38);

  /* Layout */
  --container: 1200px;
  --container-wide: 1320px;
  --container-reading: 860px;

  /* Spacing rhythm (desktop defaults) */
  --section-padding: 96px;

  /* Transitions */
  --transition: all 0.25s ease;

  /* Fonts */
  --font-body: 'Inter', sans-serif;
  --font-display: 'Playfair Display', serif;
  --text-body: 16px;
}