:root {
  /* Colors */
  --color-bg: #ffffff;
  --color-cream: #efeee5;
  --color-olive: #3c4f36;
  --color-olive-dark: #2c3c27;
  --color-ink: #1a1a1a;
  --color-ink-soft: #222222;
  --color-muted: #4b514d;
  --color-muted-2: #666666;
  --color-border: #e5e4dc;
  --color-dark: #000000;
  --color-white: #ffffff;

  /* Overlays */
  --overlay-hero: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.85) 100%);
  --overlay-dark: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.6) 100%);

  /* Typography — fonts */
  --font-display: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-accent: 'Bricolage Grotesque', 'Inter Tight', sans-serif;

  /* Typography — sizes (fluid) */
  --fs-hero: clamp(40px, 8vw, 96px);
  --fs-h1: clamp(36px, 6vw, 75px);
  --fs-h2: clamp(30px, 4.5vw, 53px);
  --fs-h3: clamp(24px, 3vw, 40px);
  --fs-h4: clamp(20px, 2vw, 24px);
  --fs-accent: clamp(36px, 5vw, 56px);
  --fs-lead: clamp(17px, 1.4vw, 20px);
  --fs-body: 18px;
  --fs-sm: 16px;
  --fs-xs: 14px;
  --fs-xxs: 12px;

  /* Line heights */
  --lh-tight: 1;
  --lh-snug: 1.1;
  --lh-display: 1.2;
  --lh-body: 1.5;
  --lh-relaxed: 1.6;

  /* Font weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* Spacing */
  --sp-0: 0;
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 64px;
  --sp-7: 96px;
  --sp-8: 128px;
  --sp-9: 160px;

  /* Layout */
  --container: 1280px;
  --container-narrow: 1024px;
  --container-pad: 32px;

  /* Buttons */
  --btn-radius: 600px;
  --btn-padding: 12px 24px;
  --btn-padding-sm: 8px 20px;

  /* Radii */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 600px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,.08);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.12);

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 600ms;

  /* z-index */
  --z-nav: 100;
  --z-banner: 9999;
  --z-modal: 10000;
}

@media (max-width: 768px) {
  :root {
    --container-pad: 20px;
    --sp-6: 48px;
    --sp-7: 64px;
    --sp-8: 80px;
  }
}