/* =========================================================================
   Heart-Felt Design System v1.0 — Tokens
   Every value here maps 1:1 to the Foundations sheet in Figma.
   Change a brand value once, here, and it propagates everywhere.
   ========================================================================= */

:root {
  /* ---- Color: Primary -------------------------------------------------- */
  --gold:        #A8894A; /* brand accent, prices, CTAs */
  --gold-light:  #C8A86A; /* hover, hero accent text */
  --gold-pale:   #F0E4CC; /* final CTA band background */
  --note:        #FFF9EE; /* design note / highlight box */

  /* ---- Color: Neutral -------------------------------------------------- */
  --white:       #FFFFFF; /* cards, page background */
  --off-white:   #F8F6F2; /* section alternates */
  --paper:       #F2EDE6; /* licensing section tint */
  --line:        #E8E3DC; /* borders, dividers */
  --line-warm:   #D4CCC0; /* secondary divider tone */
  --soft:        #9A9088; /* captions, placeholders */
  --mid:         #5A5248; /* body text */
  --charcoal:    #1A1612; /* headings, player, pricing */
  --black:       #0F0D0B; /* footer */

  /* ---- Color: Status --------------------------------------------------- */
  --success:     #2E7D5E; /* timeline checkmark, positive */
  --danger:      #C0392B; /* errors, removal */

  /* ---- Typography: families ------------------------------------------- */
  --font-display: "Cormorant", Georgia, "Times New Roman", serif;
  --font-body:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---- Typography: scale (size / line-height / weight / tracking) ------ */
  --t-display-size: 78px; --t-display-lh: 80px; --t-display-ls: -1.5px;
  --t-h1-size: 44px;      --t-h1-lh: 50px;      --t-h1-ls: -0.5px;
  --t-h2-size: 36px;      --t-h2-lh: 42px;
  --t-h3-size: 26px;      --t-h3-lh: 30px;
  --t-h4-size: 18px;      --t-h4-lh: 26px;
  --t-body-size: 16px;    --t-body-lh: 27px;
  --t-small-size: 13px;   --t-small-lh: 20px;
  --t-eyebrow-size: 11px; --t-eyebrow-lh: 16px; --t-eyebrow-ls: 2.5px;

  --w-light: 300;   /* Cormorant display weight */
  --w-regular: 400; /* body */
  --w-medium: 500;  /* H4, eyebrow, buttons */

  /* ---- Layout & grid --------------------------------------------------- */
  --max-width: 1280px;
  --gutter: 24px;

  /* ---- Spacing scale (8px base) --------------------------------------- */
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-80: 80px;   /* section side padding */
  --space-110: 110px; /* section vertical rhythm */

  /* ---- Borders & radius ----------------------------------------------- */
  --border: 1px solid var(--line);
  --border-strong: 2px solid var(--gold);
  --radius: 4px;     /* used sparingly — system is near-square */
  --radius-pill: 999px;

  /* ---- Motion ---------------------------------------------------------- */
  --ease: 0.2s ease;
}

/* Tablet down: ease the section padding */
@media (max-width: 1024px) {
  :root {
    --space-80: 40px;
    --space-110: 72px;
  }
}

/* Mobile: 18px margin per the grid spec, tighter vertical */
@media (max-width: 640px) {
  :root {
    --space-80: 18px;
    --space-110: 56px;
    --t-display-size: 40px; --t-display-lh: 44px;
    --t-h1-size: 34px;      --t-h1-lh: 40px;
    --t-h2-size: 28px;      --t-h2-lh: 34px;
    --t-h3-size: 22px;      --t-h3-lh: 28px;
  }
}