/* ============================================================
   Design tokens — single source of truth
   ============================================================ */
:root {
  /* === Colour palette === */
  --color-white:        #ffffff;
  --color-bg:           #f9f8f6;
  --color-surface:      #f4f2ef;
  --color-text:         #1a1a1a;
  --color-text-muted:   #5c5c5c;
  --color-text-light:   #9a9a9a;
  --color-border:       #e4e1dc;

  --color-accent:       #7a9e7e;
  --color-accent-light: #a0b4a0;
  --color-accent-dark:  #567a5a;

  --color-header-bg:    #ffffff;
  --color-header-text:  #1a1a1a;
  --color-header-nav:   #2e2e2e;

  --overlay-dark:       rgba(0, 0, 0, 0.40);
  --overlay-hover:      rgba(0, 0, 0, 0.18);
  --overlay-lightbox:   rgba(0, 0, 0, 0.92);

  /* === Spacing === */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:  16px;
  --space-lg:  32px;
  --space-xl:  64px;
  --space-2xl:128px;

  --section-padding-y: clamp(48px, 8vw, 96px);
  --page-margin:       clamp(20px, 5vw, 80px);
  --content-max-width: 1400px;
  --grid-gap:          6px;

  /* === Typography === */
  --font-display: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;

  --fs-name:        1.6rem;
  --fs-name-sub:    0.85rem;
  --fs-name-meta:   0.72rem;
  --fs-nav:         0.875rem;
  --fs-h1:          2.5rem;
  --fs-h2:          1.25rem;
  --fs-h3:          1.15rem;
  --fs-body:        1rem;
  --fs-small:       0.85rem;

  --lh-tight:  1.2;
  --lh-snug:   1.4;
  --lh-normal: 1.6;
  --lh-loose:  1.8;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* === Borders / radius / shadow === */
  --border-thin:   1px solid var(--color-border);
  --radius-sm:     2px;
  --shadow-sticky: 0 2px 12px rgba(0,0,0,0.06);

  /* === Motion === */
  --transition-fast:  0.2s ease;
  --transition-base:  0.35s ease;
  --transition-slow:  0.6s ease;
  --transition-hero:  1.0s ease-in-out;
  --kenburns-duration: 6s;
  --hero-intro-duration: 2.5s;

  /* === Layering === */
  --z-header:   1000;
  --z-overlay:  2000;
  --z-lightbox: 3000;
}

@media (max-width: 767px) {
  :root {
    --fs-name: 1.2rem;
    --fs-h1:   1.75rem;
    --fs-h3:   1.25rem;
  }
}