/* ============================================================
   HOMIE — DESIGN TOKENS  (v1, bootstrapped from the landing page)
   Canonical source of truth. Referenced by styleguide.html,
   privacy.html, terms.html. The landing page (index.html)
   inlines an identical :root block for instant first paint.
   No raw hex / magic numbers should appear in markup — use these.
   ============================================================ */

/* Talina — display / headline face (supplied .otf) */
@font-face {
  font-family: "Talina";
  src: url("assets/fonts/talina.otf") format("opentype");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  /* ---- Colour ------------------------------------------------ */
  --cream:        #F2E9E4;  /* primary page surface (warm)        */
  --white:        #FFFFFF;  /* raised content cards               */
  --green:        #203830;  /* dark surface + text on light       */
  --gold:         #F3C677;  /* action / accent (CTA, highlights)  */
  --gold-soft:    #F8E2A6;  /* pale gold — input fill on gold panel*/
  --sage:         #A7C3AD;  /* soft accent (pull-quote line 1)    */
  --charcoal:     #2E2D2A;  /* footer / deepest surface           */

  /* text */
  --text-on-light: var(--green);   /* body + heads on cream/white */
  --text-on-dark:  #ECE4DA;        /* body on green/charcoal/photo*/
  --text-muted-dark: rgba(236,228,218,.62);
  --text-muted-light: rgba(32,56,48,.60);

  /* overlays for photo cards */
  --scrim:        rgba(20,28,24,.46);
  --scrim-strong: rgba(16,22,19,.62);

  /* ---- Type -------------------------------------------------- */
  --font-display: "Talina", "Arial Black", sans-serif;
  --font-body:    "Host Grotesk", system-ui, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, monospace;

  --fs-display: 60px;   /* hero / pull-quote / waitlist hero      */
  --fs-h2:      44px;   /* section headlines                     */
  --fs-h3:      32px;   /* sub-headline (e.g. JOIN THE WAITLIST)  */
  --fs-body:    17px;   /* body copy                             */
  --fs-small:   12px;   /* mono marks / captions                 */
  --fs-button:  16px;

  --lh-display: 0.92;
  --lh-h2:      0.96;
  --lh-body:    1.5;

  --ls-display: -0.02em;  /* tight tracking on heavy display     */
  --ls-mono:     0.14em;  /* wide tracking on mono marks         */

  /* ---- Spacing scale (4px base) ------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --page-pad: 14px;   /* gutter at the column edge               */
  --card-pad: 26px;   /* interior padding of content cards       */
  --card-gap: 14px;   /* vertical gap between stacked cards       */

  /* ---- Radius ------------------------------------------------ */
  --r-sm:   12px;
  --r-md:   20px;
  --r-lg:   28px;   /* content cards / photo cards              */
  --r-pill: 999px;

  /* ---- Layout ------------------------------------------------ */
  --col-max: 430px;  /* mobile design column width               */

  /* ---- Motion ------------------------------------------------ */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .28s;
}