/* ============================================================
   MedicareSchool.com Design System — Colors + Type tokens
   ------------------------------------------------------------
   FONT NOTE: Brand guide specifies "Marion" (serif) + "Usual"
   (sans). IBM Plex Serif + IBM Plex Sans are the open-source
   stand-ins. Only the weights actually shipped are declared
   below (Serif 300/400/500 + Sans variable) so there are no
   font 404s in production. Heavier weights synthesize from
   Medium. Swap in Marion/Usual later by editing the @font-face
   src lines — the fallback stacks will still hold.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'IBM Plex Serif';
  src: url('fonts/IBMPlexSerif-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Serif';
  src: url('fonts/IBMPlexSerif-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Serif';
  src: url('fonts/IBMPlexSerif-Medium.ttf') format('truetype');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-Variable.ttf') format('truetype-variations');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  /* -- Brand palette -- */
  --ms-green:      #36b2a1;
  --ms-orange:     #f79452;
  --ms-yellow:     #ffbf63;
  --ms-brown-1:    #4a4542;
  --ms-brown-2:    #736963;
  --ms-tan-1:      #d1bdb2;
  --ms-tan-2:      #ede0d9;
  --ms-white:      #ffffff;

  --ms-cream:      #f7efe9;
  --ms-sand:       #e4d3c8;
  --ms-mocha:      #8f8079;
  --ms-ink:        #2b2826;

  --ms-green-900:  #1f6b62;
  --ms-green-700:  #2a8f82;
  --ms-green-500:  #36b2a1;
  --ms-green-200:  #b5e2dc;
  --ms-green-50:   #e8f6f4;

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

  /* -- Semantic roles -- */
  --fg-1:          var(--ms-brown-1);
  --fg-2:          var(--ms-brown-2);
  --fg-3:          var(--ms-mocha);
  --fg-on-dark:    var(--ms-white);
  --fg-link:       var(--ms-green-700);
  --fg-link-hover: var(--ms-green-900);

  --bg-0:          var(--ms-white);
  --bg-1:          var(--ms-cream);
  --bg-2:          var(--ms-tan-2);
  --bg-3:          var(--ms-tan-1);
  --bg-dark:       var(--ms-brown-1);
  --bg-brand:      var(--ms-green);

  --border-soft:   #ece3dc;
  --border-base:   var(--ms-tan-1);
  --border-strong: var(--ms-brown-2);

  --success:       var(--ms-green-700);
  --warning:       var(--ms-yellow);
  --danger:        #c9462d;
  --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;

  /* -- Radii -- */
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* -- Shadows -- */
  --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);
  --dur-fast: 120ms;
  --dur-base: 200ms;
}