:root {
  /* Base colors */
  --color-primary: #166534;
  --color-secondary: #1a3c34;
  --color-accent: #d97706;
  --color-background: #fafdf7;
  --color-surface: #f0f5f0;
  --color-text: #1c2b1f;
  --color-text-muted: #5a6b5e;

  /* Derived colors */
  --color-primary-text: #ffffff;
  --color-primary-hover: #145b2f;
  --color-secondary-text: #ffffff;
  --color-secondary-hover: #17362f;
  --color-accent-text: #ffffff;
  --color-accent-readable: #166534;
  --color-surface-border: #dde1dd;
  --color-surface-hover: #e6ebe6;
  --color-divider: rgba(28,43,31,0.12);
  --color-dark-bg: #122217;
  --color-dark-text: #fafdf7;

  /* Shape */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Weight */
  --heading-weight: 800;
  --display-weight: 800;
  --body-weight: 400;
  --border-width: 2px;
  --rule-weight: 4px;
  --shadow: 0 4px 12px rgba(0,0,0,0.12);
  --shadow-hover: 0 10px 24px rgba(0,0,0,0.14);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.12);
  --card-border: var(--border-width) solid var(--color-surface-border);

  /* Density */
  --section-py: clamp(64px, 8vw, 120px);
  --section-px: clamp(24px, 5vw, 120px);
  --gap: clamp(20px, 3vw, 32px);
  --gap-lg: clamp(32px, 5vw, 56px);
  --content-width: 1200px;

  /* Typography */
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Noto Sans', sans-serif;
  /* Display = heading-scale type (hero/price/quote/process numbers). Aliased to
     the heading family so display elements never fall back to the body font. */
  --font-display: 'Playfair Display', serif;

  /* Type scale — small sizes are fixed; large sizes clamp so headlines don't blow out narrow viewports. */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: clamp(24px, 4vw, 32px);
  --text-4xl: clamp(28px, 5vw, 40px);
  --text-5xl: clamp(36px, 7vw, 56px);
}
body { margin: 0; font-family: var(--font-body); background: var(--color-background); color: var(--color-text); }