/* ============================================================
   Nurture · Colors + Type · Design System Foundation
   ============================================================
   Authoritative token file for the Nurture brand. Pair with
   Poppins (Google Fonts) and the soft-cloud aesthetic.

   Use the BASE tokens (--blue-500, --slate-600, --fs-h1...) when
   you want raw values. Use the SEMANTIC tokens (--fg-default,
   --bg-surface, --link, --text-display...) when you want
   intent-bearing names that won't change if we swap palettes.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- BRAND (authoritative) ---------- */
  --nurture-blue:   #1C4C9C;
  --nurture-orange: #E67E22;

  /* ---------- BLUE SCALE ---------- */
  --blue-50:  #EEF3FB;
  --blue-100: #D6E1F4;
  --blue-200: #A9BFE6;
  --blue-300: #6F8FD0;
  --blue-400: #3D69B7;
  --blue-500: #1C4C9C;
  --blue-600: #163E80;
  --blue-700: #112F62;
  --blue-800: #0B2044;

  /* ---------- ORANGE SCALE ---------- */
  --orange-50:  #FDF1E6;
  --orange-100: #FBE0C7;
  --orange-200: #F5BF89;
  --orange-300: #EE9F54;
  --orange-400: #E98832;
  --orange-500: #E67E22;
  --orange-600: #C26617;
  --orange-700: #964F11;
  --orange-800: #6A380C;

  /* ---------- NEUTRAL CLOUD ---------- */
  --slate-50:  #F6F7F9;
  --slate-100: #EFF2F5;
  --slate-200: #E0E6EB;
  --slate-300: #C7CFD8;
  --slate-400: #99A5B2;
  --slate-500: #677687;
  --slate-600: #46596D;
  --slate-700: #3A4A60;
  --slate-800: #2C3A4D;
  --slate-900: #1C2533;
  --white:     #FFFFFF;

  /* ---------- SEMANTIC (status) ---------- */
  --color-success:    #2E8B57;
  --color-success-bg: #E8F4ED;
  --color-warning:    #D78E1A;
  --color-warning-bg: #FBF1DC;
  --color-danger:     #C2362E;
  --color-danger-bg:  #F8E5E3;
  --color-info:       var(--blue-500);
  --color-info-bg:    var(--blue-50);

  /* ---------- SEMANTIC (foreground) ---------- */
  --fg-default:  var(--slate-600);   /* body text */
  --fg-strong:   var(--slate-700);   /* headings */
  --fg-stronger: var(--slate-800);   /* display */
  --fg-muted:    var(--slate-500);   /* secondary text */
  --fg-subtle:   var(--slate-400);   /* helper, meta */
  --fg-inverse:  var(--white);       /* on dark */
  --fg-brand:    var(--blue-500);
  --fg-accent:   var(--orange-500);

  /* ---------- SEMANTIC (background / surface) ---------- */
  --bg-page:     var(--white);
  --bg-surface:  var(--slate-50);
  --bg-sunken:   var(--slate-100);
  --bg-tint:     var(--blue-50);
  --bg-accent:   var(--orange-50);
  --bg-inverse:  var(--blue-500);

  /* ---------- SEMANTIC (border) ---------- */
  --border-default: var(--slate-200);
  --border-strong:  var(--slate-300);
  --border-focus:   var(--blue-400);
  --border-brand:   var(--blue-500);

  /* ---------- SEMANTIC (link) ---------- */
  --link:         var(--blue-500);
  --link-hover:   var(--blue-600);
  --link-visited: var(--blue-700);

  /* ---------- TYPOGRAPHY: FAMILIES ---------- */
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Source Serif 4", "Source Serif Pro", "PT Serif", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-display: var(--font-sans); /* Poppins handles display headlines */
  --font-brand:   var(--font-serif); /* Serif used for the wordmark + editorial pull-quotes */

  /* ---------- TYPOGRAPHY: SCALE ---------- */
  --fs-display: 72px;
  --fs-h1:      56px;
  --fs-h2:      36px;
  --fs-h3:      22px;
  --fs-h4:      16px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-small:   13px;
  --fs-eyebrow: 12px;

  /* ---------- TYPOGRAPHY: LINE / TRACK ---------- */
  --lh-tight: 1.05;
  --lh-snug:  1.15;
  --lh-base:  1.55;

  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.015em;
  --tracking-base:    0;
  --tracking-eyebrow: 0.12em;

  /* ---------- TYPOGRAPHY: WEIGHT ---------- */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* ---------- SPACING (generous) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---------- RADIUS (rounded, never sharp) ---------- */
  --r-xs:  6px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-full: 9999px;

  /* ---------- SHADOWS (soft cloud — blue-tinted) ---------- */
  --shadow-xs:     0 1px 2px rgba(28, 76, 156, 0.06);
  --shadow-sm:     0 2px 6px rgba(28, 76, 156, 0.06), 0 1px 2px rgba(28, 76, 156, 0.04);
  --shadow-md:     0 6px 16px rgba(28, 76, 156, 0.08), 0 2px 4px rgba(28, 76, 156, 0.04);
  --shadow-lg:     0 16px 40px rgba(28, 76, 156, 0.10), 0 4px 8px rgba(28, 76, 156, 0.04);
  --shadow-orange: 0 8px 24px rgba(230, 126, 34, 0.18);
  --shadow-focus:  0 0 0 4px rgba(28, 76, 156, 0.12);

  /* ---------- MOTION ---------- */
  --ease:   cubic-bezier(.2,.7,.3,1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 360ms;

  /* ---------- LAYOUT ---------- */
  --container: 1180px;
  --gutter:    24px;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   These apply Nurture's type ramp to bare HTML so any prototype
   that imports this file gets sensible defaults out of the box.
   ============================================================ */

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg-default);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-strong);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-snug);
  margin: 0 0 var(--s-3);
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
}
h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
  font-weight: var(--fw-semibold);
}
h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
}

p { margin: 0 0 var(--s-4); }

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
a:hover { color: var(--link-hover); }
a:visited { color: var(--link-visited); }

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
}

/* Display class for hero treatment */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
}

/* Eyebrow — the recurring small uppercase label */
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
}

/* Helper / muted */
.muted    { color: var(--fg-muted); }
.subtle   { color: var(--fg-subtle); }
.helper   { font-size: var(--fs-small); color: var(--fg-subtle); }