/* Theme tokens: spec/pages/00-theme-and-design-system.md. The only place colours, type sizes and spacing are defined. */
:root {
  /* 2. Colour */
  --color-bg: #FAF8F5;
  --color-surface: #FFFFFF;
  --color-sand: #F1EBE4;
  --color-line: #E2D9CF;
  --color-ink: #2F3032;
  --color-ink-muted: #5F6063;
  --color-brand-grey: #656668;
  --color-accent: #9D877A;
  --color-accent-strong: #75604F;
  --color-dark: #2A2B2D;
  --color-on-dark: #F3EFEA;
  --color-on-dark-muted: #B9B2AA;
  --color-whatsapp: #25D366;
  --color-whatsapp-hover: #1EBE5B;
  --color-on-whatsapp: #0B2E1A;
  --color-star: #C9A227;
  --color-focus: #75604F;
  --color-error: #A23B2A;                                   /* theme 7.12 */
  --color-on-dark-line: rgb(255 255 255 / 10%);             /* footer bottom bar, global layout 3 */
  --color-lightbox-backdrop: rgb(20 20 21 / 92%);           /* theme 7.7 */
  --overlay-dark: linear-gradient(rgb(42 43 45 / 55%), rgb(42 43 45 / 25%));
  --overlay-hero: linear-gradient(90deg, rgb(42 43 45 / 70%) 0%, rgb(42 43 45 / 45%) 55%, rgb(42 43 45 / 25%) 100%); /* home.md 1: stronger on the left */

  /* 3. Typography */
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  --fs-h1: clamp(2.125rem, 1.6rem + 2.2vw, 3.25rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --fs-h3: clamp(1.3125rem, 1.2rem + 0.5vw, 1.625rem);
  --fs-h4: clamp(1.0625rem, 1.04rem + 0.1vw, 1.125rem);
  --fs-body: clamp(1rem, 0.98rem + 0.1vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;
  --fs-nav: 0.9375rem;
  --fs-label: 0.875rem;
  --lh-display: 1.1;
  --lh-h1: 1.15;
  --lh-h2: 1.2;
  --lh-h3: 1.3;
  --lh-h4: 1.4;
  --lh-body: 1.7;
  --lh-small: 1.6;
  --ls-eyebrow: 0.18em;
  --measure: 68ch;

  /* 4. Spacing, layout and shape */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --section-pad: var(--space-8);
  --container: 1200px;
  --gutter: var(--space-4);
  --grid-gap: var(--space-4);
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-round: 999px;
  --shadow-sm: 0 1px 2px rgb(42 43 45 / 6%);
  --shadow-md: 0 8px 24px rgb(42 43 45 / 8%);
  --header-h: 72px;
  --header-h-scrolled: 64px;
  --logo-h: 60px;          /* full square logo files (logo-1/logo-2) include the name and tagline */
  --logo-h-scrolled: 54px;
  --tap: 44px;
  --btn-h: 48px;
  --btn-h-compact: 40px;
  --fab: 56px;
  --play: 72px;

  /* 6. Motion */
  --t-fast: 200ms;
  --t-reveal: 400ms;
  --t-zoom: 500ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 640px) {
  :root {
    --section-pad: var(--space-9);
    --gutter: var(--space-5);
    --grid-gap: var(--space-5);
  }
}

@media (min-width: 1025px) {
  :root {
    --section-pad: var(--space-10);
    --gutter: var(--space-6);
    --header-h: 88px;
    --header-h-scrolled: 72px;
    --logo-h: 78px;
    --logo-h-scrolled: 64px;
  }
}

@media (min-width: 1441px) {
  :root { --container: 1320px; }
}