/* ============================================================
   MedicareSchool.com Design System
   Colors + Type tokens
   ============================================================

   FONT NOTE: The official brand guide specifies "Marion" (headline
   serif) and "Usual" (sans subhead/body). The user supplied IBM
   Plex Serif + IBM Plex Sans as a modern, open-source substitute
   — similar warm-humanist serif + friendly, readable sans pairing.
   If/when Marion and Usual licenses are acquired, swap the
   @font-face src lines below and the fallback stacks will still
   hold up.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'IBM Plex Serif';
  src: url('IBMPlexSerif-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Serif';
  src: url('IBMPlexSerif-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Serif';
  src: url('IBMPlexSerif-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Serif';
  src: url('IBMPlexSerif-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Serif';
  src: url('IBMPlexSerif-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Serif';
  src: url('IBMPlexSerif-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('IBMPlexSans-Variable.ttf') format('truetype-variations');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('IBMPlexSans-Italic-Variable.ttf') format('truetype-variations');
  font-weight: 100 700;
  font-style: italic;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  /* -- Brand palette (from styleguide page 9) -- */
  --ms-green:      #36b2a1; /* Med Green   — primary accent */
  --ms-orange:     #f79452; /* Med Orange  — energetic CTA */
  --ms-yellow:     #ffbf63; /* Med Yellow  — highlight */
  --ms-brown-1:    #4a4542; /* Med Brown 1 — text / dark ground */
  --ms-brown-2:    #736963; /* Med Brown 2 — secondary text */
  --ms-tan-1:      #d1bdb2; /* Med Tan 1   — warm neutral */
  --ms-tan-2:      #ede0d9; /* Med Tan 2   — soft background */
  --ms-white:      #ffffff;

  /* Extended warm-neutral scale, derived in-palette
     (Med Tan 2 at the top, Med Brown 1 at the bottom) */
  --ms-cream:      #f7efe9;      /* slightly lighter than tan-2 */
  --ms-sand:       #e4d3c8;      /* between tan-2 and tan-1 */
  --ms-mocha:      #8f8079;      /* between brown-2 and tan-1 */
  --ms-ink:        #2b2826;      /* ink-darker than brown-1 */

  /* Tints/shades of green + orange for hovers, pressed, rings */
  --ms-green-900:  #1f6b62;
  --ms-green-700:  #2a8f82;
  --ms-green-500:  #36b2a1; /* base */
  --ms-green-200:  #b5e2dc;
  --ms-green-50:   #e8f6f4;

  --ms-orange-900: #a85a24;
  --ms-orange-700: #d07837;
  --ms-orange-500: #f79452; /* base */
  --ms-orange-200: #fbd1b3;
  --ms-orange-50:  #fdf0e6;

  /* -- Semantic color roles -- */
  --fg-1:          var(--ms-brown-1);   /* default text */
  --fg-2:          var(--ms-brown-2);   /* secondary text */
  --fg-3:          var(--ms-mocha);     /* muted / captions */
  --fg-on-dark:    var(--ms-white);
  --fg-on-brand:   var(--ms-white);
  --fg-link:       var(--ms-green-700);
  --fg-link-hover: var(--ms-green-900);

  --bg-0:          var(--ms-white);     /* page */
  --bg-1:          var(--ms-cream);     /* soft surface */
  --bg-2:          var(--ms-tan-2);     /* warmer surface */
  --bg-3:          var(--ms-tan-1);     /* card accent / inset */
  --bg-dark:       var(--ms-brown-1);   /* inverted surfaces */
  --bg-brand:      var(--ms-green);

  --border-soft:   #ece3dc;             /* hairline on cream */
  --border-base:   var(--ms-tan-1);     /* default card border */
  --border-strong: var(--ms-brown-2);

  /* -- Status (aligned with palette) -- */
  --success:       var(--ms-green-700);
  --warning:       var(--ms-yellow);
  --danger:        #c9462d;  /* warm red, tonal with palette */
  --info:          var(--ms-green-700);

  /* -- Type families -- */
  --font-serif:    'IBM Plex Serif', 'Marion', Georgia, 'Times New Roman', serif;
  --font-sans:     'IBM Plex Sans',  'Usual',  -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:     'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* -- Type scale (16px base, modest ratio, generous for 55+ readers) -- */
  --fs-12:  12px;
  --fs-14:  14px;
  --fs-16:  16px;
  --fs-18:  18px;
  --fs-20:  20px;
  --fs-24:  24px;
  --fs-30:  30px;
  --fs-36:  36px;
  --fs-48:  48px;
  --fs-60:  60px;
  --fs-72:  72px;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;  /* eyebrow / small caps labels */

  /* -- Spacing (4px grid) -- */
  --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;
  --space-32: 128px;

  /* -- Radii (soft, approachable but not cartoony) -- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* -- Shadows (warm, low-key — never cold blue) -- */
  --shadow-xs: 0 1px 2px rgba(74, 69, 66, 0.06);
  --shadow-sm: 0 2px 6px rgba(74, 69, 66, 0.08);
  --shadow-md: 0 8px 20px rgba(74, 69, 66, 0.10);
  --shadow-lg: 0 18px 40px rgba(74, 69, 66, 0.14);
  --shadow-ring-focus: 0 0 0 3px rgba(54, 178, 161, 0.35);

  /* -- Motion -- */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* -- Layout -- */
  --container-max: 1200px;
  --container-pad: clamp(16px, 4vw, 40px);
}

/* ---------- Base semantic type ---------- */
html { font-size: 16px; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-serif);
  font-weight: 500;         /* Plex Serif at 500 reads close to Marion */
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  margin: 0 0 var(--space-4);
}

h1, .h1 {
  font-size: clamp(var(--fs-36), 4.5vw, var(--fs-60));
  line-height: var(--lh-tight);
  font-weight: 500;
}
h2, .h2 {
  font-size: clamp(var(--fs-30), 3.2vw, var(--fs-48));
  line-height: var(--lh-snug);
}
h3, .h3 {
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  font-weight: 600;
}
h4, .h4 {
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  font-weight: 600;
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ms-green-700);
}

p, .body {
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

.lead {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--fs-20);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}

.small, small {
  font-size: var(--fs-14);
  color: var(--fg-2);
}

a {
  color: var(--fg-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--fg-link-hover); }

/* Big "editorial" pull quote used on marketing surfaces */
.pull-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(var(--fs-24), 2.4vw, var(--fs-36));
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

/* Utility classes consumed across cards/UI kit */
.surface-soft  { background: var(--bg-1); }
.surface-warm  { background: var(--bg-2); }
.surface-dark  { background: var(--bg-dark); color: var(--fg-on-dark); }
.text-brand    { color: var(--ms-green-700); }
.text-accent   { color: var(--ms-orange); }