:root {
  /* Colors */
  --color-bg:          #0D0D0D;
  --color-bg-alt:      #141414;
  --color-surface:     #1A1A1A;
  --color-surface-2:   #222222;
  --color-white:       #FAFAF8;
  --color-gold:        #C9A84C;
  --color-gold-light:  #E8C96A;
  --color-gold-dim:    rgba(201, 168, 76, 0.15);
  --color-text:        #FAFAF8;
  --color-muted:       #8A8A8A;
  --color-muted-2:     #5A5A5A;
  --color-border:      rgba(201, 168, 76, 0.2);
  --color-border-sub:  rgba(255, 255, 255, 0.08);

  /* Typography */
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.25rem;   /* 20px */
  --text-xl:   1.5rem;    /* 24px */
  --text-2xl:  2rem;      /* 32px */
  --text-3xl:  2.5rem;    /* 40px */
  --text-4xl:  3rem;      /* 48px */
  --text-hero: clamp(3rem, 7vw, 6rem);
  --text-h2:   clamp(2.25rem, 5vw, 4rem);
  --text-h3:   clamp(1.25rem, 3vw, 2rem);

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

  /* Layout */
  --container-max:  1280px;
  --container-wide: 1440px;
  --container-pad:  clamp(1rem, 5vw, 5rem);

  /* Borders */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   300ms ease;
  --transition-slow:   600ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Shadows */
  --shadow-gold:  0 0 32px rgba(201, 168, 76, 0.15);
  --shadow-hover: 0 8px 40px rgba(0, 0, 0, 0.6);

  /* Nav */
  --nav-height: 80px;
}