/* ============================================================
   Careway public site — design tokens and typography
   Source: Careway Brand Identity Guidelines v1.0 (2026)

   Matches the type treatment the signup landing pages use, which is the
   reference for how Careway type should look: Source Serif 4 headings set in
   Care Green at weight 400 with tight tracking, Be Vietnam Pro body copy at
   reduced opacity. Fonts are self-hosted (see fonts.css); nothing here
   reaches out to a font CDN.
   ============================================================ */

:root {
  /* ---------- Brand palette ---------- */
  --cw-pure-white:    #FFFEFE;
  --cw-rich-black:    #131612;

  --cw-calm-green:    #F2F4EF;
  --cw-care-green:    #33482C;
  --cw-care-green-hover: #1F2E1A;
  --cw-warm-burgundy: #3C1625;

  --cw-accent-green:  #E5EFAE;
  --cw-soft-green:    #BFCCA0;

  --cw-calm-pink:     #FFF0F0;
  --cw-accent-pink:   #FFC6C7;

  /* ---------- Semantic surfaces and foregrounds ---------- */
  --bg-page:          var(--cw-calm-green);
  --bg-surface:       var(--cw-pure-white);
  --bg-inverse:       var(--cw-care-green);

  --fg-1:             var(--cw-rich-black);
  --fg-2:             rgba(19, 22, 18, 0.72);
  --fg-3:             rgba(19, 22, 18, 0.52);
  --fg-on-dark:       var(--cw-calm-green);
  --fg-on-dark-2:     rgba(242, 244, 239, 0.76);
  --fg-heading:       var(--cw-care-green);

  --line-1:           rgba(51, 72, 44, 0.12);
  --line-2:           rgba(51, 72, 44, 0.22);
  --line-on-dark:     rgba(242, 244, 239, 0.20);

  /* ---------- Type families ---------- */
  --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-sans:  "Be Vietnam Pro", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---------- Type scale ---------- */
  --fs-display:   clamp(40px, 5.4vw, 64px);
  --fs-h1:        clamp(36px, 4.6vw, 54px);
  --fs-h2:        clamp(28px, 3.2vw, 38px);
  --fs-h3:        24px;
  --fs-h4:        20px;
  --fs-h5:        18px;
  --fs-body-lg:   19px;
  --fs-body:      17px;
  --fs-body-sm:   16px;
  --fs-caption:   14px;
  --fs-eyebrow:   13px;

  --lh-tight:     1.04;
  --lh-snug:      1.2;
  --lh-normal:    1.5;
  --lh-loose:     1.55;

  --tracking-eyebrow: 0.14em;
  --tracking-button:  0.01em;
  --tracking-tight:   -0.01em;
  --tracking-display: -0.02em;

  /* ---------- Spacing (8pt grid) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- Radii ---------- */
  --r-sm:    8px;
  --r-md:    14px;
  --r-lg:    16px;
  --r-xl:    24px;
  --r-2xl:   32px;
  --r-pill:  999px;

  /* ---------- Elevation ---------- */
  --shadow-1: 0 1px 2px rgba(19,22,18,0.04), 0 2px 6px rgba(19,22,18,0.04);
  --shadow-2: 0 4px 16px rgba(19,22,18,0.06), 0 1px 4px rgba(19,22,18,0.04);
  --shadow-3: 0 18px 48px -12px rgba(51,72,44,0.18), 0 4px 12px rgba(19,22,18,0.06);
  --shadow-cta: 0 12px 28px -14px rgba(51, 72, 44, 0.45);

  /* ---------- Motion ---------- */
  --ease-soft:     cubic-bezier(.22,.61,.36,1);
  --dur-fast:      160ms;
  --dur-base:      260ms;
}

/* ============================================================
   Typography
   ============================================================ */

h1, h2, h3, h4, h5, h6 { font-weight: inherit; }

.cw-display,
.cw-h1, .cw-h2, .cw-h3, .cw-h4, .cw-h5 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--fg-heading);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  margin: 0;
  text-wrap: balance;
}

.cw-display { font-size: var(--fs-display); }
.cw-h1      { font-size: var(--fs-h1); }
.cw-h2      { font-size: var(--fs-h2); letter-spacing: -0.015em; }
.cw-h3      { font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }
.cw-h4      { font-size: var(--fs-h4); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }
.cw-h5      { font-size: var(--fs-h5); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }

/* Italic accent inside a headline is a brand signature. */
.cw-display em, .cw-h1 em, .cw-h2 em, .cw-h3 em {
  font-style: italic;
  font-weight: inherit;
}

.cw-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--cw-care-green);
}

.cw-body-lg, .cw-body, .cw-body-sm, .cw-caption {
  font-family: var(--font-sans);
  color: var(--fg-2);
  margin: 0;
  font-weight: 400;
  text-wrap: pretty;
}
.cw-body-lg  { font-size: var(--fs-body-lg); line-height: var(--lh-loose); }
.cw-body     { font-size: var(--fs-body);    line-height: var(--lh-loose); }
.cw-body-sm  { font-size: var(--fs-body-sm); line-height: var(--lh-normal); }
.cw-caption  { font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--fg-3); }

.cw-strong { font-weight: 600; color: var(--fg-1); }