/*
  DESIGN TOKENS — The GPS Within
  The brand's "ingredient box": every color & font, defined once with a name.

  Two groups below:
   1. ROLES  — what a color DOES (background, text, button…). The site uses these.
   2. PALETTE — the full set of brand colors by name, for illustrations & accents.

  To tweak a color later, change it here once and the whole site follows.
  Keep the semicolon ; at the end of every line.
*/

:root {
  /* ============ 1. ROLES (what each color does) ============ */

  /* Backgrounds */
  --color-background:   #F5EFDF;  /* warm cream — the main "paper" (~60% of page) */
  --color-surface:      #FFFFFF;  /* white — cards & alternating sections */
  --color-surface-warm: #FDFBF7;  /* warm off-white — "raised paper" lift on the cream band */
  --color-surface-alt:  #EFEFEF;  /* soft grey — footer / subtle bands */
  --color-divider:      #E6E6E6;  /* hairlines & dividers */

  /* Text */
  --color-text:         #4D4550;  /* plum-charcoal — body text on light backgrounds */
  --color-text-inverse: #FFFFFF;  /* white — text on dark/colorful backgrounds */
  --color-heading:      #407557;  /* forest green — main titles (readable, 4.7:1) */
  --color-subheading:   #CF623C;  /* terracotta — sub-headings & accents (large text only) */

  /* Buttons / actions (like Rivka's current site: green & plum, never shouty) */
  --color-button:       #407557;  /* primary button — forest green */
  --color-button-alt:   #4D4550;  /* secondary button — plum */
  --color-button-text:  #FFFFFF;  /* text sitting on the buttons above */


  /* ============ 2. FULL PALETTE (by name — for accents & illustrations) ============ */
  /* Extracted from the GPS Within gradient icons: dark / mid / light of each hue. */

  /* Greens */
  --green:        #407557;
  --green-mid:    #76AC8D;
  --green-light:  #8BC0A1;
  --green-deep:   #335D45;   /* footer green darkened ~20% — for the hover blob on the green band
                                (same green:blob relationship the live site uses) */

  /* Warm — golds */
  --gold-dark:    #D78925;
  --gold:         #ECBA5F;
  --gold-light:   #F9D77E;

  /* Warm — coral / salmon (#CF623C also used for sub-headings; lighter two are decorative) */
  --terracotta:   #CF623C;
  --salmon:       #E29784;
  --peach:        #EAAE9F;

  /* Blues — used sparingly, as an occasional cool accent only (not a core color) */
  --blue:         #4979A6;
  --blue-mid:     #6BA4C6;
  --blue-light:   #81C1DD;

  /* Plum & mauve — grounding tones */
  --plum:         #4D4651;
  --mauve:        #725F72;
  --mauve-light:  #886E85;


  /* ---------- Using color on section backgrounds ----------
     Focus: warm tones, greens & plums lead; blue is an occasional accent only.
     Text on a COLORED band:
       • Deep tones (plum, forest green, deep blue) -> use WHITE text.
       • Light tints (golds, peach, sky-light #81C1DD, sage-light #8BC0A1)
         -> use PLUM text #4D4550. Golds read best; mid tints are large-text-only.
       • Mauves are too deep for plum text -> use WHITE text.
       • AVOID white text on gold (#D78925) — too low contrast.
     Full contrast checks: palette board linked in README -> Resources. */


  /* ============ FONTS ============ */
  /* All free on Google Fonts — must still be LOADED when we build the site
     (naming them here isn't enough on its own).
       Headings    → Montserrat Alternates  (playful alt letterforms)
       Sub-heads   → Montserrat Alternates  (same family)
       Body        → Source Sans 3          (humanist sans, built for easy reading) */
  --font-display:    "Scripter", "Montserrat", sans-serif;   /* h1 + h2 (licensed display face) */
  --font-heading:    "Montserrat Alternates", "Montserrat", sans-serif;
  --font-subheading: "Montserrat Alternates", "Montserrat", sans-serif;
  --font-body:       "Source Sans 3", "Source Sans Pro", sans-serif;


  /* ============ TYPE SCALE (sizes) ============ */
  /* Sizes are in rem: 1rem = 16px by default, but rem respects the visitor's
     browser text-size setting (better for accessibility than fixed px).
     Big headings use clamp(MIN, FLUID, MAX) so they shrink smoothly on phones. */
  --text-h1:    clamp(2.5rem, 5vw, 3.5rem);   /* 40–56px · hero title */
  --text-h2:    clamp(2rem, 4vw, 2.5rem);     /* 32–40px · section titles */
  --text-h3:    clamp(1.5rem, 3vw, 1.75rem);  /* 24–28px · sub-sections */
  --text-h4:    1.25rem;                      /* 20px · small headings */
  --text-body:  1.125rem;                     /* 18px · paragraphs */
  --text-small: 0.875rem;                     /* 14px · captions, fine print */
  --text-label: 0.75rem;                      /* 12px · uppercase eyebrows/labels */

  /* Line height (space between lines) */
  --leading-tight: 1.15;   /* headings — snug */
  --leading-body:  1.6;    /* paragraphs — comfortable for Source Sans body */

  /* Font weight — lighter body reads easier; bold for display.
     (Montserrat & Alternates: 100–900. Source Sans 3 body: 200–900.) */
  --weight-body:    400;   /* Source Sans regular — body text */
  --weight-subhead: 600;   /* Montserrat Alternates semibold — sub-headings */
  --weight-heading: 700;   /* Montserrat bold — section titles, labels, buttons */
  --weight-strong:  800;   /* Montserrat extra-bold — hero title */

  /* Letter spacing (tracking) */
  --tracking-heading: -0.015em;  /* slightly tight on big display type */
  --tracking-label:    0.12em;   /* airy, for UPPERCASE labels */
}