/* =========================================================================
   GenWell Rx — Colors & Type
   Telehealth wellness brand. Warm, professional, trustworthy.
   All tokens derived from the brand logo (teal / indigo-purple / lime) and
   the live genwellrx.com site (Source Sans body, warm charcoal #463939 text).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- BRAND CORE ---------- */
  --brand-teal:        #00C0C0;  /* Wordmark + swoosh — primary action color */
  --brand-teal-deep:   #00A0B8;  /* Hover / pressed teal */
  --brand-teal-dark:   #007A8A;  /* Text on light / focus rings */
  --brand-indigo:      #3B1E7C;  /* "Genwell RX" wordmark — dark brand color */
  --brand-indigo-mid:  #604090;  /* Secondary accents */
  --brand-indigo-soft: #8A6FB8;  /* Decorative / tags */
  --brand-sky:         #60C0F0;  /* Tertiary, blob mid-tone */
  --brand-lime:        #A0E080;  /* Highlight / success-adjacent accent */

  /* ---------- BRAND GRADIENT (from the logo blob) ---------- */
  --brand-gradient:
    linear-gradient(135deg, #3B1E7C 0%, #604090 22%, #00A0B8 55%, #00C0C0 75%, #A0E080 100%);
  --brand-gradient-soft:
    linear-gradient(135deg, #EEE6FA 0%, #D7F3F6 55%, #E8F7DC 100%);
  --brand-gradient-sky:
    linear-gradient(135deg, #00A0B8 0%, #60C0F0 100%);

  /* ---------- NEUTRALS (warm) ---------- */
  --ink-900: #2A1F1F;   /* Headlines */
  --ink-800: #3D2F2F;
  --ink-700: #463939;   /* Body — matches live site */
  --ink-500: #6B5A5A;   /* Secondary text */
  --ink-400: #8C7A7A;   /* Muted */
  --ink-300: #B8A8A8;   /* Disabled */
  --ink-200: #E6DFDF;   /* Borders */
  --ink-100: #F2EDED;   /* Subtle dividers */
  --ink-50:  #FAF7F7;   /* Warm card background */
  --white:   #FFFFFF;

  /* ---------- SURFACES ---------- */
  --bg-canvas:   #FBF9F7;   /* App background — warm off-white */
  --bg-card:     #FFFFFF;
  --bg-muted:    #F4F0ED;   /* Cream panels */
  --bg-tint-teal:   #E6F7F7;
  --bg-tint-indigo: #EDE7F6;
  --bg-tint-lime:   #F0F8E6;
  --bg-dark:     #1B1427;   /* Deep indigo-black — footers, dark panels */

  /* ---------- SEMANTIC ---------- */
  --success: #3BB273;
  --success-bg: #E4F5EC;
  --warning: #D69E2E;
  --warning-bg: #FDF4E1;
  --danger:  #D9534F;
  --danger-bg: #FBE9E8;
  --info:    var(--brand-teal-dark);
  --info-bg: var(--bg-tint-teal);

  /* ---------- FOREGROUND ALIASES ---------- */
  --fg-1: var(--ink-900);  /* Primary headings */
  --fg-2: var(--ink-700);  /* Body copy */
  --fg-3: var(--ink-500);  /* Secondary */
  --fg-4: var(--ink-400);  /* Tertiary / meta */
  --fg-inverse: #FFFFFF;
  --fg-brand:   var(--brand-indigo);
  --fg-accent:  var(--brand-teal-dark);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Nunito', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body:    'Source Sans 3', 'Source Sans Pro', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* ---------- TYPE SCALE ---------- */
  --fs-display: 64px;   /* Marketing hero */
  --fs-h1:      44px;
  --fs-h2:      32px;
  --fs-h3:      24px;
  --fs-h4:      20px;
  --fs-lg:      18px;
  --fs-base:    16px;
  --fs-sm:      14px;
  --fs-xs:      12px;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-base:    1.55;
  --lh-loose:   1.7;

  --ls-tight:   -0.02em;
  --ls-normal:  0em;
  --ls-wide:    0.04em;
  --ls-caps:    0.08em;

  /* ---------- SPACING (8px base) ---------- */
  --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: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* ---------- SHADOWS (soft, warm-tinted) ---------- */
  --shadow-xs: 0 1px 2px rgba(59,30,124,0.06);
  --shadow-sm: 0 2px 6px rgba(59,30,124,0.08), 0 1px 2px rgba(59,30,124,0.04);
  --shadow-md: 0 8px 20px rgba(59,30,124,0.10), 0 2px 4px rgba(59,30,124,0.05);
  --shadow-lg: 0 20px 40px rgba(59,30,124,0.14), 0 4px 10px rgba(59,30,124,0.06);
  --shadow-xl: 0 32px 64px rgba(59,30,124,0.18);
  --shadow-teal-glow: 0 8px 28px rgba(0,192,192,0.35);
  --shadow-focus: 0 0 0 4px rgba(0,192,192,0.28);

  /* ---------- BORDERS ---------- */
  --border-hair: 1px solid var(--ink-200);
  --border-strong: 1px solid var(--ink-300);
  --border-brand: 1px solid var(--brand-teal);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.3, 0.64, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;

  /* ---------- LAYOUT ---------- */
  --container-max: 1200px;
  --container-narrow: 760px;
}

/* =========================================================================
   SEMANTIC TYPE — drop-in styles for h1/h2/etc. using the tokens above.
   ========================================================================= */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-2);
  background: var(--bg-canvas);
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-1);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  margin: 0;
}

.display, .type-display { font-family: var(--font-display); font-size: var(--fs-display); font-weight: 900; line-height: 1.02; letter-spacing: -0.03em; color: var(--fg-1); }
h1, .type-h1 { font-size: var(--fs-h1); }
h2, .type-h2 { font-size: var(--fs-h2); font-weight: 700; }
h3, .type-h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; }
h4, .type-h4 { font-size: var(--fs-h4); font-weight: 700; letter-spacing: -0.005em; }

.type-lead { font-family: var(--font-body); font-size: var(--fs-lg); font-weight: 400; line-height: var(--lh-loose); color: var(--fg-2); }
.type-body, p { font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--fg-2); }
.type-small, small { font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--fg-3); }
.type-meta { font-size: var(--fs-xs); line-height: 1.4; color: var(--fg-4); }
.type-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-accent);
}
.type-mono, code { font-family: var(--font-mono); font-size: 0.9em; }

a { color: var(--brand-teal-dark); text-decoration: none; transition: color var(--dur-base) var(--ease-standard); }
a:hover { color: var(--brand-indigo-mid); }

/* Brand wordmark treatment used in the logo */
.brand-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brand-indigo);
  letter-spacing: -0.01em;
}
.brand-wordmark .rx { color: var(--brand-indigo); }
.brand-wordmark .tagline {
  display: block;
  font-weight: 500;
  color: var(--brand-teal);
  font-size: 0.52em;
  letter-spacing: 0.02em;
  margin-top: 0.05em;
}