:root {

  /* COLORS */
  --color-bg: #232323;
  --color-surface: #2B2B2B;
  --color-card: #343434;

  --color-text: #F5F2EC;
  --color-muted: #C2B8AA;

  --color-accent: #c6a16e;
  --color-accent-light: #e8d7b7;

  --color-border: rgba(255,255,255,0.07);

  /* TYPOGRAPHY */
  --font-heading: "Cormorant Garamond", serif;
  --font-body: "Inter", sans-serif;

  /* FONT SIZES */
  --fs-xs: 0.75rem;
  --fs-sm: 0.9rem;
  --fs-md: 1rem;
  --fs-lg: 1.2rem;
  --fs-xl: 2rem;
  --fs-2xl: 4rem;
  --fs-hero: clamp(4rem, 8vw, 8rem);

  /* SPACING */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 80px;
  --space-2xl: 120px;

  /* BORDER RADIUS */
  --radius-sm: 12px;
  --radius-md: 24px;
  --radius-lg: 40px;

  /* SHADOWS */
  --shadow-soft:
    0 10px 40px rgba(0,0,0,0.25);

  /* TRANSITIONS */
  --transition-fast: 0.3s ease;
  --transition-smooth: 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}