:root {
  /* Colors — light, warm, open */
  --color-bg:           #F2EDE6;   /* warm off-white */
  --color-bg-subtle:    #EAE4DC;   /* slightly deeper for sections */
  --color-bg-elevated:  #EAE4DC;   /* same as subtle (replaces old #111) */
  --color-bg-card:      #FFFFFF;   /* review cards, form fields */
  --color-border:       rgba(26, 26, 24, 0.10);
  --color-text:         #1A1A18;   /* near-black */
  --color-text-muted:   #6B6660;   /* warm mid-grey */
  --color-text-dim:     #A8A39C;   /* lighter grey for details */
  --color-accent:       #7DC31B;   /* logo green — unchanged */
  --color-accent-dark:  #5A9614;
  --color-accent-glow:  rgba(125, 195, 27, 0.12);
  --color-overlay:      rgba(242, 237, 230, 0.85);

  /* Canvas / video areas stay dark regardless of page theme */
  --color-canvas-bg:    #0A0A0A;

  /* Typography — Bricolage Grotesque (variable, craft grotesque) + Figtree */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'Figtree', system-ui, sans-serif;

  /* Spacing */
  --section-pad:    clamp(5rem, 10vw, 10rem);
  --container-pad:  clamp(1.5rem, 5vw, 5rem);
  --container-max:  1440px;
  --gap:            clamp(0.75rem, 1.5vw, 1.5rem);

  /* Nav */
  --nav-h: 72px;

  /* Easing */
  --ease-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout:   cubic-bezier(0.87, 0, 0.13, 1);

  /* Misc */
  --radius: 2px;
  --grain-opacity: 0.02;
}