/* ============================================================
   Synergy Support Services — Colors & Type
   ------------------------------------------------------------
   Source of truth for brand tokens. Import this once at the top
   of any page that uses the design system.
   ============================================================ */

/* ---------- Fonts (Google Fonts — see README for substitution notes) ---------- */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Source+Sans+3:wght@300;400;500;600;700&display=swap");

:root {
  /* ============================================================
     BRAND COLORS
     The four "people" in the logo: purple, teal, green, coral.
     Purple is the primary brand color. Teal pairs with it for
     gradients and the secondary wordmark line. Green and coral
     are accents used in iconography + service category coding.
     ============================================================ */

  /* Primary — deep "Synergy" purple */
  --color-purple-900: #2C1257;
  --color-purple-700: #4A2380;   /* wordmark, headlines on light */
  --color-purple-600: #5B2D90;   /* primary buttons */
  --color-purple-500: #6B3FA0;   /* hover / links */
  --color-purple-300: #B79AD6;
  --color-purple-100: #EEE6F7;   /* card bg, badge bg */
  --color-purple-50:  #F7F3FB;   /* page section bg */

  /* Secondary — teal (the "Support services" word, feedback icon) */
  --color-teal-700:   #157A86;
  --color-teal-600:   #1B9AAA;   /* secondary text/icons */
  --color-teal-500:   #2BB0BF;
  --color-teal-100:   #DDF1F4;
  --color-teal-50:    #ECF8FA;

  /* Accent — leaf green (encouragement) */
  --color-green-700:  #4E9930;
  --color-green-600:  #6CBE3F;   /* "good" badges, leaf accent */
  --color-green-100:  #E4F3D9;
  --color-green-50:   #F2F9EA;

  /* Accent — coral (shared goals, alerts/heart) */
  --color-coral-700:  #C04545;
  --color-coral-600:  #E25C5C;
  --color-coral-100:  #FBE0E0;
  --color-coral-50:   #FDEEEE;

  /* ============================================================
     NEUTRALS
     Warm-leaning neutrals to feel human, not clinical.
     ============================================================ */
  --color-ink-900:    #1B1430;   /* near-black with a hint of purple */
  --color-ink-700:    #3A3450;
  --color-ink-500:    #6A6580;   /* body copy on light */
  --color-ink-400:    #8E8AA0;
  --color-ink-300:    #C2BFD0;
  --color-ink-200:    #E4E2EC;
  --color-ink-100:    #F2F0F7;
  --color-ink-50:     #FAF9FC;
  --color-white:      #FFFFFF;

  /* ============================================================
     SEMANTIC TOKENS — use these in components, not raw palette.
     ============================================================ */
  --fg-1: var(--color-ink-900);             /* primary text */
  --fg-2: var(--color-ink-500);             /* secondary text */
  --fg-3: var(--color-ink-400);             /* tertiary / meta */
  --fg-brand: var(--color-purple-700);      /* brand emphasis */
  --fg-link: var(--color-purple-600);
  --fg-on-brand: var(--color-white);

  --bg-page: var(--color-white);
  --bg-section: var(--color-purple-50);     /* alternate sections */
  --bg-card: var(--color-white);
  --bg-card-soft: var(--color-ink-50);
  --bg-brand: var(--color-purple-600);
  --bg-brand-soft: var(--color-purple-100);

  --border-1: var(--color-ink-200);
  --border-2: var(--color-ink-300);
  --border-brand: var(--color-purple-300);

  /* Signature gradient — the CTA banner runs purple → teal */
  --gradient-brand: linear-gradient(95deg, var(--color-purple-600) 0%, var(--color-purple-500) 40%, var(--color-teal-600) 100%);
  --gradient-hero-blob: linear-gradient(135deg, var(--color-purple-100) 0%, var(--color-teal-100) 100%);

  /* ============================================================
     TYPOGRAPHY
     Display:  Playfair Display — elegant serif for headlines,
               taglines, and editorial moments. Often italic for
               the brand's softer voice.
     Body:     Source Sans 3 — humanist sans, friendly and legible
               at small sizes, good for older readers.
     Mono:     reserved (rarely used; phone numbers stay in body).
     ============================================================ */
  --font-display: "Playfair Display", "Source Serif Pro", Georgia, serif;
  --font-body:    "Source Sans 3", "Source Sans Pro", -apple-system, system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (rem) — generous, accessibility-friendly */
  --fs-display: 3.25rem;   /* 52px — hero */
  --fs-h1:      2.5rem;    /* 40px */
  --fs-h2:      2rem;      /* 32px — section titles */
  --fs-h3:      1.375rem;  /* 22px — card titles */
  --fs-h4:      1.125rem;  /* 18px */
  --fs-lg:      1.125rem;  /* 18px — lede paragraphs */
  --fs-md:      1rem;      /* 16px — body */
  --fs-sm:      0.875rem;  /* 14px — meta, labels */
  --fs-xs:      0.75rem;   /* 12px — eyebrows (used UPPERCASE) */

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.55;
  --lh-loose:   1.7;

  --tracking-eyebrow: 0.12em;
  --tracking-button:  0.01em;

  /* ============================================================
     SHAPE — generous rounding, soft shadows. Care brand = warm.
     ============================================================ */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;       /* cards */
  --radius-lg: 20px;       /* large cards, stat bars */
  --radius-xl: 28px;       /* CTA banners */
  --radius-pill: 999px;    /* buttons are pills */

  /* Shadows — kept gentle, lavender-tinted */
  --shadow-xs: 0 1px 2px rgba(75, 35, 128, 0.06);
  --shadow-sm: 0 2px 6px rgba(75, 35, 128, 0.06), 0 1px 2px rgba(75, 35, 128, 0.04);
  --shadow-md: 0 8px 24px rgba(75, 35, 128, 0.08), 0 2px 6px rgba(75, 35, 128, 0.05);
  --shadow-lg: 0 18px 40px rgba(75, 35, 128, 0.10), 0 4px 10px rgba(75, 35, 128, 0.06);

  /* ============================================================
     SPACING — 4px base, used everywhere
     ============================================================ */
  --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;
  --space-20: 80px;
  --space-24: 96px;

  /* ============================================================
     MOTION — care brand uses gentle, never bouncy motion
     ============================================================ */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast:  140ms;
  --dur-base:  220ms;
  --dur-slow:  360ms;
}

/* ============================================================
   ELEMENT DEFAULTS — applied when colors_and_type.css is imported.
   Components can still override. These guarantee a baseline.
   ============================================================ */
html {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg-1);
  font-weight: 600;
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-display); font-weight: 700; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p {
  margin: 0 0 var(--space-4);
  color: var(--fg-2);
  line-height: var(--lh-normal);
  text-wrap: pretty;
}

a {
  color: var(--fg-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-soft);
}
a:not(.btn):hover { color: var(--color-purple-700); }

small, .meta {
  font-size: var(--fs-sm);
  color: var(--fg-3);
}

/* Eyebrow label — small uppercase tracked text above a heading */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-teal-600);
}