/* ============================================================
   NextNewSteps — Fonts
   Plus Jakarta Sans — a friendly, rounded geometric sans that
   echoes the logo wordmark; premium, highly legible for older
   users and caregivers. Used for both display and text so the
   voice stays calm and cohesive. Geist Mono for reference codes.

   NOTE (substitution): no original brand font files were
   provided. Plus Jakarta Sans was chosen to match the rounded
   logo. Swap for any licensed brand font if one exists.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap');
/* ============================================================
   NextNewSteps — Color Tokens
   Anchored on the REAL logo navy (#011D4C): trust, medical
   authority, calm. Medical blue drives interaction; a calm
   recovery green and warm sand add human, hopeful warmth.
   ============================================================ */

:root {
  /* ---- Primary: Navy (brand / trust) — anchored on logo #011D4C ---- */
  --navy-50:  #F1F5FB;
  --navy-100: #DDE7F3;
  --navy-200: #B9CBE4;
  --navy-300: #88A6CF;
  --navy-400: #5179AE;
  --navy-500: #2C5489;
  --navy-600: #1B3F6E;
  --navy-700: #102A4D;  /* brief "deep navy" */
  --navy-800: #08234A;
  --navy-900: #011D4C;  /* brand navy — the logo */
  --navy-950: #02132F;

  /* ---- Medical Blue (interaction / links / accents) ---- */
  --blue-50:  #F3F8FF;
  --blue-100: #EAF4FF;  /* soft sky */
  --blue-200: #CBE0FB;
  --blue-300: #9DC4F6;
  --blue-400: #62A1F1;
  --blue-500: #2F80ED;  /* medical blue */
  --blue-600: #1E6AD0;
  --blue-700: #1854A8;

  /* ---- Recovery Green (calm / progress / reassurance) ---- */
  --green-50:  #EEF5F2;
  --green-100: #DBEBE5;
  --green-200: #BCD8CE;
  --green-300: #98C2B3;
  --green-400: #7BAE9F;  /* calm green */
  --green-500: #5E9788;
  --green-600: #4A7C6F;
  --green-700: #3A6256;

  /* ---- Warm Sand (editorial warmth / soft sections) ---- */
  --sand-50:  #FBF8F2;
  --sand-100: #F5EFE6;  /* warm sand */
  --sand-200: #ECE1CE;
  --sand-300: #DECBAF;
  --sand-400: #C9B190;

  /* ---- Neutrals (cool gray, tuned to navy; charcoal #1F2933) ---- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F7F9FB;  /* light grey */
  --neutral-100: #EEF1F5;
  --neutral-200: #DFE3E9;
  --neutral-300: #C3CAD3;
  --neutral-400: #9CA6B2;
  --neutral-500: #7A8694;
  --neutral-600: #58626F;
  --neutral-700: #3C4654;
  --neutral-800: #1F2933;  /* charcoal */
  --neutral-900: #141B23;

  /* ---- Semantic status ---- */
  --success: #2E8B62;
  --success-bg: #E7F4ED;
  --warning: #C9831F;
  --warning-bg: #FAF0DC;
  --danger: #C44536;
  --danger-bg: #FAE9E6;
  --info: var(--blue-500);
  --info-bg: var(--blue-100);

  /* ============================================================
     Semantic aliases — reference these in components.
     ============================================================ */

  /* Brand */
  --brand: var(--navy-900);
  --brand-hover: var(--navy-800);
  --brand-accent: var(--blue-500);
  --brand-accent-hover: var(--blue-600);
  --brand-calm: var(--green-400);
  --brand-warm: var(--sand-100);

  /* Text */
  --text-strong: var(--navy-950);
  --text-heading: var(--navy-900);
  --text-body: var(--neutral-800);
  --text-muted: var(--neutral-600);
  --text-subtle: var(--neutral-500);
  --text-on-dark: var(--neutral-0);
  --text-on-dark-muted: var(--navy-200);
  --text-accent: var(--blue-700);
  --text-link: var(--blue-600);

  /* Surfaces */
  --surface-page: var(--neutral-0);
  --surface-subtle: var(--neutral-50);
  --surface-muted: var(--neutral-100);
  --surface-card: var(--neutral-0);
  --surface-navy: var(--navy-900);
  --surface-sky: var(--blue-100);
  --surface-sand: var(--sand-100);
  --surface-green-soft: var(--green-50);

  /* Borders */
  --border-subtle: var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong: var(--neutral-400);
  --border-on-dark: rgba(255, 255, 255, 0.16);

  /* Focus */
  --focus-ring: var(--blue-500);
}
/* ============================================================
   NextNewSteps — Typography Tokens
   One cohesive family: Plus Jakarta Sans (display + text).
   Large, confident, accessible for older users & caregivers.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ---- Weights ---- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* ---- Type scale (root = 16px) ---- */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.25rem;   /* 20 */
  --text-2xl:  1.5rem;    /* 24 */
  --text-3xl:  1.875rem;  /* 30 */
  --text-4xl:  2.25rem;   /* 36 */
  --text-5xl:  3rem;      /* 48 */
  --text-6xl:  3.75rem;   /* 60 */
  --text-7xl:  4.5rem;    /* 72 */

  /* ---- Line heights ---- */
  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* ---- Letter spacing ---- */
  --tracking-tighter: -0.035em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.16em; /* the spaced "NEW STEPS" eyebrow treatment */

  /* ---- Semantic roles ---- */
  --display-font: var(--font-display);
  --display-weight: var(--weight-extrabold);
  --display-tracking: var(--tracking-tight);
  --display-leading: var(--leading-tight);

  --heading-font: var(--font-display);
  --heading-weight: var(--weight-bold);
  --heading-tracking: var(--tracking-tight);
  --heading-leading: var(--leading-snug);

  --body-font: var(--font-sans);
  --body-weight: var(--weight-regular);
  --body-leading: var(--leading-relaxed);

  --eyebrow-font: var(--font-sans);
  --eyebrow-weight: var(--weight-bold);
  --eyebrow-tracking: var(--tracking-wider);
  --eyebrow-size: var(--text-sm);
}
/* ============================================================
   NextNewSteps — Spacing, Radii, Shadows, Layout, Motion
   4px base grid. Generous, spacious layout; soft navy-tinted
   shadows; rounded corners that echo the friendly logo.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */

  /* ---- Section rhythm ---- */
  --section-pad-y: clamp(4rem, 9vw, 8rem);
  --content-max: 1200px;
  --content-narrow: 760px;
  --gutter: clamp(1.25rem, 5vw, 3rem); /* @kind spacing */

  /* ---- Radii (friendly, rounded) ---- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-width-strong: 1.5px;

  /* ---- Shadows (soft, navy-tinted) ---- */
  --shadow-xs: 0 1px 2px rgba(2, 19, 47, 0.06);
  --shadow-sm: 0 1px 3px rgba(2, 19, 47, 0.08), 0 1px 2px rgba(2, 19, 47, 0.04);
  --shadow-md: 0 6px 16px rgba(2, 19, 47, 0.08), 0 2px 6px rgba(2, 19, 47, 0.05);
  --shadow-lg: 0 16px 40px rgba(2, 19, 47, 0.10), 0 4px 12px rgba(2, 19, 47, 0.06);
  --shadow-xl: 0 28px 64px rgba(2, 19, 47, 0.14), 0 8px 20px rgba(2, 19, 47, 0.08);
  --shadow-focus: 0 0 0 3px rgba(47, 128, 237, 0.30);
  --shadow-card: var(--shadow-md);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --duration-fast: 140ms; /* @kind other */
  --duration-base: 240ms; /* @kind other */
  --duration-slow: 420ms; /* @kind other */

  /* ---- Z-index ---- */
  --z-base: 1; /* @kind other */
  --z-sticky: 100; /* @kind other */
  --z-overlay: 1000; /* @kind other */
  --z-modal: 1100; /* @kind other */
  --z-toast: 1200; /* @kind other */
}
/* ============================================================
   NextNewSteps — Base element styles & helpers
   Light resets + sensible defaults so cards/components inherit
   the brand voice without extra setup.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--body-leading);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--heading-font);
  color: var(--text-heading);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  line-height: var(--heading-leading);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

img { max-width: 100%; display: block; }

/* ---- Utility roles ---- */
.nns-eyebrow {
  font-family: var(--eyebrow-font);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-size: var(--eyebrow-size);
  color: var(--text-accent);
}

.nns-display {
  font-family: var(--display-font);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
  color: var(--text-heading);
}

.nns-lead {
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}