:root {
  /* Palette — dark charcoal
     #121315 → deepest surface / shadows
     #17191A → main background
     #272930 → card / elevated surface
     #B8B8CA → text
  */
  --color-bg:         #17191A;
  --color-card:       rgba(39, 41, 48, 0.65);
  --color-accent:     #FE7743;
  --color-blue:       #447D9B;
  --color-text:       #B8B8CA;
  --color-heading:    #FFFFFF;
  --color-muted:      rgba(184, 184, 202, 0.72);
  --color-border:     rgba(184, 184, 202, 0.12);
  --color-shadow:     rgba(18, 19, 21, 0.7);
  --color-star:       rgba(184, 184, 202, 0.85);
  --color-line:       rgba(184, 184, 202, 0.12);

  /* Typography */
  --font-sans:  'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-serif: Georgia, 'Times New Roman', serif;
  --font-mono:  'Courier New', Courier, monospace;

  --fs-xs:   0.72rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.2rem;
  --fs-xl:   1.6rem;
  --fs-2xl:  2.2rem;
  --fs-hero: clamp(2.8rem, 6vw, 5rem);

  /* Spacing */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;

  /* Layout */
  --max-width: 1180px;
  --nav-height: 64px;
  --card-radius: 1rem;
  --pill-radius: 999px;

  /* Animation */
  --ease-fast: 150ms ease;
  --ease-base: 280ms ease;
  --ease-slow: 500ms ease;
}