:root {
  /* Colors */
  --color-bg: #f3efe8;
  --color-bg-soft: #f7f3ed;
  --color-surface: rgba(255, 255, 255, 0.58);
  --color-surface-strong: rgba(255, 255, 255, 0.78);
  --color-text: #111111;
  --color-text-soft: #2f2a24;
  --color-text-muted: #5f584f;
  --color-border: rgba(17, 17, 17, 0.10);
  --color-border-strong: rgba(17, 17, 17, 0.18);

--color-accent: #5a17af;
--color-accent-hover: #4d1495;
--color-accent-2: #7a46c0;
--color-accent-3: #46128a;

  --color-success: #198754;
  --color-warning: #b7791f;
  --color-danger: #b42318;

  /* Typography */
  --font-base: 'Montserrat', Arial, Helvetica, sans-serif;

  --fs-hero: clamp(2.4rem, 7vw, 5.5rem);
  --fs-h1: clamp(2rem, 6vw, 4rem);
  --fs-h2: clamp(1.6rem, 4.5vw, 2.8rem);
  --fs-h3: clamp(1.2rem, 3.5vw, 1.75rem);
  --fs-body-lg: clamp(1.0625rem, 2vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.9375rem;
  --fs-xs: 0.8125rem;

  --lh-tight: 1.08;
  --lh-heading: 1.12;
  --lh-body: 1.6;

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 880px;
  --container-gutter: 20px;
  --section-space-y: 72px;
  --section-space-y-lg: 96px;

  /* Radius */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  /* Spacing */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 5rem;
  --space-5xl: 7rem;

  /* Effects */
  --shadow-soft: 0 12px 30px rgba(25, 18, 10, 0.08);
  --shadow-card: 0 14px 40px rgba(25, 18, 10, 0.06);

  /* Breakpoints */
  --bp-tablet: 768px;
  --bp-desktop: 1200px;

  --hero-overlay-top: 0.48;
  --hero-overlay-mid: 0.56;
  --hero-overlay-bottom: 0.66;
}