:root {
  
  --color-bg: #090909;
  --color-bg-soft: #111111;
  --color-surface: #171717;
  --color-surface-2: #1f1f1f;

  --color-primary: #7a4319;
  --color-primary-hover: #8b4e1f;
  --color-accent: #9a5a2b;

  --color-text: #f5f5f5;
  --color-text-muted: #cfcfcf;
  --color-text-soft: #a8a8a8;

  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.16);
  --color-line: rgba(122, 67, 25, 0.34);

  --overlay-dark: rgba(0, 0, 0, 0.5);
  --overlay-soft: rgba(255, 255, 255, 0.02);

  --glow-soft: 0 0 35px rgba(122, 67, 25, 0.16);
  --glow-medium: 0 0 70px rgba(122, 67, 25, 0.22);
  --glow-strong: 0 0 120px rgba(122, 67, 25, 0.28);

  --font-heading: "Cormorant Garamond", serif;
  --font-body: "Cairo", sans-serif;

  --fs-h1: clamp(2.9rem, 6vw, 6rem);
  --fs-h2: clamp(2rem, 4vw, 3.6rem);
  --fs-h3: clamp(1.3rem, 2vw, 1.9rem);
  --fs-body: 1rem;
  --fs-small: 0.92rem;

  --lh-heading: 0.95;
  --lh-body: 1.85;

  --container-width: 1280px;
  --container-padding: 24px;

  --section-space: 120px;

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 30px;
  --radius-xl: 42px;
  --radius-pill: 999px;

  --shadow-sm: 0 12px 30px rgba(0, 0, 0, 0.16);
  --shadow-md: 0 24px 60px rgba(0, 0, 0, 0.24);
  --shadow-lg: 0 35px 120px rgba(0, 0, 0, 0.34);

  --transition-fast: 0.25s ease;
  --transition-base: 0.45s ease;
  --transition-slow: 0.8s ease;
}