/* Thara Tropical — design tokens.
   Source of truth: brand/thara-tropical-brand-document.html (colours, fonts).
   Change a value here and it changes everywhere. */

@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/cormorant-garamond.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap; src: url('../fonts/cormorant-garamond-italic.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/montserrat.woff2') format('woff2'); }

:root {
  /* Brand palette */
  --sage: #8A8A68;
  --cream: #F7F7EF;
  --stone: #E7E6E2;
  --taupe: #66615C;
  --moss: #4A5236;
  --charcoal: #2F2E29;
  --sand: #C8B8A8;
  --driftwood: #A89888;   /* decorative only: fails contrast for small text */
  --teak: #B89878;
  --gold: #E8D8B8;
  --lagoon: #3E7C7A;

  /* Type */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-label: .75rem;
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.2rem, 1.05rem + .7vw, 1.5rem);
  --fs-h3: 1.5rem;
  --fs-h2: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
  --fs-h1: clamp(2.75rem, 1.8rem + 4.5vw, 5.5rem);

  /* Spacing scale */
  --sp-1: .5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --sp-8: 8rem;
  --section: clamp(4rem, 10vw, 8rem);
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --measure: 38rem;
  --max: 74rem;

  /* Shapes and layout */
  --radius-arch: 999px;
  --radius: 4px;
  --header-h: 4rem;
  --bar-h: 4.5rem;
}

/* Section themes. Each section sets its own background and text colours, and everything inside follows. */
.section--cream    { --bg: var(--cream);    --fg: var(--charcoal); --muted: var(--taupe);   --em: var(--moss); }
.section--stone    { --bg: var(--stone);    --fg: var(--charcoal); --muted: #4F4A45;        --em: var(--moss); }
.section--gold     { --bg: var(--gold);     --fg: var(--charcoal); --muted: #4F4A45;        --em: var(--moss); }
.section--moss     { --bg: var(--moss);     --fg: var(--cream);    --muted: #D8D2C2;        --em: var(--gold); }
.section--charcoal { --bg: var(--charcoal); --fg: var(--cream);    --muted: #CFC8BA;        --em: var(--gold); }