:root {
  /* === COLORS === */
  --base:           #080d16;
  --surface:        #111827;
  --surface-2:      #1c2636;
  --accent:         #bf4e1c;
  --accent-hover:   #d4602a;
  --accent-muted:   rgba(191, 78, 28, 0.13);
  --accent-glow:    rgba(191, 78, 28, 0.22);

  --page-bg:        #f6f5f2;
  --section-bg:     #eceae5;
  --white:          #ffffff;

  --text-primary:   #0f1520;
  --text-secondary: #3d4451;
  --text-muted:     #64748b;

  --border:         #ddd9d3;
  --border-dark:    rgba(255, 255, 255, 0.07);

  --white-hi:       rgba(255, 255, 255, 0.88);
  --white-mid:      rgba(255, 255, 255, 0.48);
  --white-lo:       rgba(255, 255, 255, 0.18);

  /* === TYPOGRAPHY === */
  --font-display: 'Barlow Condensed', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  --text-xs:   0.7rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  2.75rem;
  --text-5xl:  3.75rem;
  --text-6xl:  5.5rem;
  --text-hero: clamp(3.2rem, 8vw, 7rem);

  /* === SPACING === */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  7rem;
  --space-2xl: 10rem;

  /* === SHAPE === */
  --radius-sm:   5px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 9999px;

  /* === MOTION === */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-std:    cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    150ms;
  --dur-base:    260ms;
  --dur-slow:    500ms;
  --dur-reveal:  800ms;
}