/* =======================================================
   Encounters Dating — Design Tokens
   Foundational variables. Loaded first on every page.
   ======================================================= */

:root {
  /* ---------- Colour ---------- */

  /* Brand */
  --plum:        #5C3A5E;   /* primary brand colour */
  --plum-deep:   #3F2840;   /* headings, deepest accents */
  --plum-light:  #7A5080;   /* hover states, lighter accents */
  --plum-faint:  #F2EDF3;   /* tinted backgrounds, chips */

  --rose:        #A0464A;   /* CTAs, eyebrow labels, accents */
  --rose-light:  #C97070;   /* secondary accent, hover tints */
  --rose-faint:  #F9EFEF;   /* tinted backgrounds, no-match disc */

  /* Surfaces */
  --bg:          #FBF7F0;   /* warm cream page background */
  --bg-alt:      #F4EFE6;   /* slightly darker cream for inset zones */
  --surface:     #FFFFFF;   /* card and content area background */

  /* Text */
  --text:        #2C2A28;   /* primary body copy */
  --text-mid:    #6B6865;   /* secondary copy, labels */
  --text-light:  #9E9B98;   /* tertiary copy, meta info */

  /* Lines */
  --border:      #E8E2D6;   /* card and row dividers */
  --rule:        #DCD4C4;   /* heavier divider rules */

  /* Functional */
  --good:        #6B8E5F;   /* match / positive — muted sage */
  --good-faint:  #EAF0E5;   /* match background tint */


  /* ---------- Typography ---------- */
  --serif: 'Fraunces', Georgia, serif;
  --sans:  'Nunito Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Font sizes */
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 17px;          /* body default — generous for 45+ readers */
  --fs-md:   15px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  42px;

  /* Line heights */
  --lh-tight:  1.15;
  --lh-snug:   1.4;
  --lh-base:   1.7;
  --lh-loose:  1.8;

  /* Letter spacing */
  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-eyebrow: 0.16em;     /* small-caps eyebrow tracking */


  /* ---------- Spacing ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;


  /* ---------- Radius ---------- */
  --radius-sm:  3px;
  --radius:     6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-pill: 100px;


  /* ---------- Layout ---------- */
  --container-max: 1180px;
  --container-pad: 32px;


  /* ---------- Transitions ---------- */
  --t-fast:   0.15s ease;
  --t-base:   0.2s ease;
  --t-slow:   0.4s ease;
}