/* ============================================================
   PRIME TRANSITION CARE — Colors & Type
   Single source of truth for brand tokens.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garant:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=Sora:wght@300;400;500;600;700;800&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ---------- Brand palette (raw) ---------- */
  --prime-navy:        #16324F;  /* Trust, immigration, professionalism */
  --prime-navy-deep:   #0E2238;  /* Pressed / footer */
  --prime-navy-soft:   #1F4366;  /* Hover on navy */
  --prime-gold:        #D99A2B;  /* Opportunity, arrival, CTAs */
  --prime-gold-deep:   #B47E1F;  /* Pressed gold */
  --prime-gold-soft:   #E8B85C;  /* Hover / highlight */
  --prime-sage:        #8FAF9B;  /* Care, calm, caregiver tracks */
  --prime-sage-deep:   #6E8E7B;
  --prime-sage-soft:   #B5CBBE;
  --prime-ivory:       #F7F2EA;  /* Warm background, body canvas */
  --prime-ivory-deep:  #EFE7D8;  /* Section dividers, subtle bands */
  --prime-charcoal:    #263238;  /* Body copy, documentation */
  --prime-charcoal-2:  #4A565C;  /* Secondary text */
  --prime-charcoal-3:  #7A858B;  /* Tertiary, captions */
  --prime-red:         #B43A2E;  /* Heritage, campaign moments — sparing */
  --prime-red-deep:    #8E2A21;
  --prime-white:       #FFFFFF;
  --prime-line:        #E4DDCF;  /* Hairline on ivory */
  --prime-line-strong: #C9BFAB;

  /* ---------- Semantic foreground ---------- */
  --fg-strong:    var(--prime-navy);
  --fg-body:      var(--prime-charcoal);
  --fg-muted:     var(--prime-charcoal-2);
  --fg-subtle:    var(--prime-charcoal-3);
  --fg-on-navy:   var(--prime-ivory);
  --fg-on-gold:   var(--prime-navy);
  --fg-on-sage:   var(--prime-navy);
  --fg-accent:    var(--prime-gold);
  --fg-danger:    var(--prime-red);

  /* ---------- Semantic background ---------- */
  --bg-page:      var(--prime-ivory);
  --bg-surface:   #FFFFFF;
  --bg-band:      var(--prime-ivory-deep);
  --bg-inverse:   var(--prime-navy);
  --bg-inverse-2: var(--prime-navy-deep);
  --bg-care:      #EEF2EE;            /* sage-tinted band */
  --bg-warm:      #FBF7EE;            /* lighter ivory wash */

  /* ---------- Borders ---------- */
  --border-hairline:   1px solid var(--prime-line);
  --border-strong:     1px solid var(--prime-line-strong);
  --border-navy:       1px solid var(--prime-navy);
  --border-focus:      2px solid var(--prime-gold);

  /* ---------- Typography ---------- */
  --font-display: 'Cormorant Garant', 'Palatino Linotype', Georgia, serif;
  --font-ui:      'Sora', 'Manrope', system-ui, sans-serif;
  --font-body:    'Source Sans 3', 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — based on a 16px body with 1.25 modular ratio */
  --fs-eyebrow: 0.75rem;     /* 12 */
  --fs-caption: 0.8125rem;   /* 13 */
  --fs-body:    1rem;        /* 16 */
  --fs-lead:    1.125rem;    /* 18 */
  --fs-h6:      1.125rem;    /* 18 */
  --fs-h5:      1.25rem;     /* 20 */
  --fs-h4:      1.5rem;      /* 24 */
  --fs-h3:      1.875rem;    /* 30 */
  --fs-h2:      2.5rem;      /* 40 */
  --fs-h1:      3.25rem;     /* 52 */
  --fs-display: 4.5rem;      /* 72 */

  /* Line heights */
  --lh-tight:    1.08;
  --lh-snug:     1.2;
  --lh-display:  1.05;
  --lh-heading:  1.18;
  --lh-body:     1.55;
  --lh-relaxed:  1.7;

  /* Letter spacing */
  --tracking-eyebrow: 0.14em;
  --tracking-display: -0.015em;
  --tracking-heading: -0.01em;
  --tracking-body:    0;

  /* Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---------- Spacing (4px 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 ---------- */
  --radius-xs:  3px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 999px;

  /* ---------- Shadows — soft, papery, never harsh ---------- */
  --shadow-1: 0 1px 2px rgba(22, 50, 79, 0.06), 0 1px 1px rgba(22, 50, 79, 0.04);
  --shadow-2: 0 4px 12px rgba(22, 50, 79, 0.08), 0 1px 2px rgba(22, 50, 79, 0.05);
  --shadow-3: 0 12px 32px rgba(22, 50, 79, 0.10), 0 2px 6px rgba(22, 50, 79, 0.06);
  --shadow-4: 0 24px 56px rgba(22, 50, 79, 0.14), 0 4px 12px rgba(22, 50, 79, 0.08);
  --shadow-inset-line: inset 0 -1px 0 var(--prime-line);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-enter:    cubic-bezier(0.16, 0.84, 0.44, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 0.7, 0.2);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;

  /* ---------- Layout ---------- */
  --container-narrow: 720px;
  --container-readable: 880px;
  --container-default: 1140px;
  --container-wide: 1280px;
}

/* ============================================================
   Base typography
   ============================================================ */

html, body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-body);
  background: var(--bg-page);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
  color: var(--fg-strong);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-heading);
  margin: 0;
  text-wrap: balance;
}

h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-display); letter-spacing: var(--tracking-display); font-weight: var(--fw-bold); }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-tight);   font-weight: var(--fw-semibold); }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-snug);    font-weight: var(--fw-semibold); }
h4, .h4 { font-size: var(--fs-h4); line-height: var(--lh-heading); font-weight: var(--fw-semibold); }
h5, .h5 { font-size: var(--fs-h5); line-height: var(--lh-heading); font-weight: var(--fw-medium); }
h6, .h6 { font-size: var(--fs-h6); line-height: var(--lh-heading); font-weight: var(--fw-medium); }

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--fw-bold);
  color: var(--fg-strong);
}

p { margin: 0 0 var(--space-4) 0; text-wrap: pretty; }
.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--prime-gold);
}

.caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  color: var(--fg-subtle);
}

a {
  color: var(--prime-navy);
  text-decoration: underline;
  text-decoration-color: var(--prime-gold);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--prime-navy-soft); }

::selection { background: var(--prime-gold); color: var(--prime-navy); }

/* Focus ring — gold on ivory for visibility + brand */
:focus-visible {
  outline: var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}