/* ==========================================================================
   Collaborative Care & Wellness  -  Design Tokens
   --------------------------------------------------------------------------
   Single source of truth for color, type, space, radius, shadow and motion.
   Every value in main.css references a custom property defined here, so the
   whole site can be re-skinned by editing this one file.

   Filename is intentionally "variables.css" for portability.
   ========================================================================== */

:root {

  /* -- 1. Brand palette --------------------------------------------------- */
  --navy:        #1d3a5f;   /* primary headings, dark UI            */
  --navy-deep:   #16273f;   /* footer, deepest surfaces             */
  --navy-soft:   #34537a;   /* secondary navy, hover                */
  --teal:        #2a6b5f;   /* brand primary  -  CTAs, icons, links   */
  --teal-dark:   #1f5249;   /* CTA hover / pressed                  */
  --teal-soft:   #e4eeeb;   /* teal tint background                 */
  --gold:        #bf9d5a;   /* accent  -  rules, dividers (NOT text)  */
  --gold-soft:   #ddc99a;   /* lighter accent                       */
  --cream:       #faf7f0;   /* page background                      */
  --ivory:       #fffdf8;   /* warm card surface                    */
  --white:       #ffffff;
  --sage:        #eef1ec;   /* alternating band tint                */
  --sage-deep:   #e4ebe3;

  /* -- 2. Ink (text) ------------------------------------------------------ */
  --ink:         #36424f;   /* body copy  -  dark slate               */
  --ink-muted:   #303946;   /* secondary copy                       */
  --ink-faint:   #56616d;   /* fine print, captions                 */
  --line:        #e6e0d2;   /* warm hairline borders                */
  --line-cool:   #dde3e6;   /* cool hairline borders                */

  /* -- 3. Semantic aliases (components reference these) ------------------- */
  --c-bg:           var(--cream);
  --c-bg-alt:       var(--sage);
  --c-surface:      var(--ivory);
  --c-surface-flat: var(--white);
  --c-heading:      var(--navy);
  --c-text:         var(--ink);
  --c-text-muted:   var(--ink-muted);
  --c-brand:        var(--teal);
  --c-accent:       var(--gold);
  --c-cta:          var(--teal);
  --c-cta-hover:    var(--teal-dark);
  --c-border:       var(--line);
  --c-on-dark:      #f4f1ea;
  --c-on-dark-mute: #d2dbe2;
  --c-focus:        #d8a23e;   /* high-contrast focus ring             */

  /* -- 4. Typography ------------------------------------------------------ */
  /* Display = elegant serif; Body = clean humanist sans. The named fonts   */
  /* are used when available on the device; otherwise the stack falls back  */
  /* to high-quality system fonts with no external font requests.           */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Source Sans 3", system-ui, -apple-system, "Segoe UI",
                  Roboto, Helvetica, Arial, sans-serif;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Fluid type scale  -  min, preferred (vw-based), max. */
  --fs-xs:    0.8125rem;                                    /* 13  -  fine print   */
  --fs-sm:    0.9375rem;                                    /* 15  -  small / meta */
  --fs-base:  1.0625rem;                                    /* 17  -  body         */
  --fs-md:    1.15rem;                                      /* lead paragraph    */
  --fs-lg:    1.38rem;                                      /* h3 / card titles  */
  --fs-xl:    2rem;                                         /* h2 / band titles  */
  --fs-2xl:   2.45rem;                                      /* page h1           */
  --fs-3xl:   2.45rem;                                      /* hero display      */

  --lh-tight:  1.12;
  --lh-snug:   1.28;
  --lh-base:   1.65;
  --lh-loose:  1.8;

  --ls-tight:  0;
  --ls-normal: 0;
  --ls-wide:   0;
  --ls-wider:  0;        /* eyebrow / small-caps labels */

  /* -- 5. Spacing scale (4px base unit) ----------------------------------- */
  --space-2xs: 0.25rem;   /*  4 */
  --space-xs:  0.5rem;    /*  8 */
  --space-sm:  0.75rem;   /* 12 */
  --space-md:  1rem;      /* 16 */
  --space-lg:  1.5rem;    /* 24 */
  --space-xl:  2rem;      /* 32 */
  --space-2xl: 3rem;      /* 48 */
  --space-3xl: 4.5rem;    /* 72 */
  --space-4xl: 6.5rem;    /* 104 */

  /* -- 6. Layout ---------------------------------------------------------- */
  --container:        92rem;     /* 1472 - max content width      */
  --container-narrow: 54rem;     /* 864   -  prose / centered heads  */
  --container-pad:    clamp(1rem, 0.6rem + 2vw, 3rem);
  --band-py:          clamp(2.35rem, 1.9rem + 1.7vw, 4.25rem);
  --header-h:         4.75rem;

  /* -- 7. Radius ---------------------------------------------------------- */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* -- 8. Shadow / elevation --------------------------------------------- */
  --shadow-xs:   0 1px 2px rgba(22, 39, 63, 0.06);
  --shadow-sm:   0 4px 12px rgba(22, 39, 63, 0.07);
  --shadow:      0 10px 30px rgba(22, 39, 63, 0.10);
  --shadow-lg:   0 24px 60px rgba(22, 39, 63, 0.16);
  --ring:        0 0 0 3px var(--c-focus);

  /* -- 9. Motion ---------------------------------------------------------- */
  --ease:      cubic-bezier(0.33, 0.1, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 0.84, 0.44, 1);
  --dur-fast:  140ms;
  --dur:       260ms;
  --dur-slow:  520ms;

  /* -- 10. Z-index -------------------------------------------------------- */
  --z-base:    1;
  --z-raised:  10;
  --z-header:  100;
  --z-menu:    200;
  --z-overlay: 300;
}