/* Glucose Insights: shared chrome for the secondary pages (blog, support, legal).
   Tokens follow the homepage (index.html) and the app's Theme.swift.
   The legacy --slate / --sand / --accent names are kept so the pages' own
   inline styles keep working, remapped onto paper and ink. */

:root {
  --paper: #FBFAF7;
  --paper-2: #F4F2ED;
  --paper-3: #ECE9E1;
  --ink: #171614;
  --ink-2: #2B2925;
  --ink-soft: #6E6A63;
  --ink-3: #A8A49B;
  --emerald: #0D9A66;
  --emerald-deep: #0B7F55;
  --hair: rgba(23, 22, 20, .08);
  --hair-2: rgba(23, 22, 20, .14);
  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --container: 1200px;

  /* legacy names used by the pages' inline styles */
  --slate-950: var(--paper);
  --slate-900: var(--paper-2);
  --slate-800: var(--paper-3);
  --slate-700: #DDD9D0;
  --slate-600: var(--ink-3);
  --slate-400: var(--ink-soft);
  --slate-300: #4A4741;
  --sand-100: var(--ink);
  --sand-200: var(--ink);
  --sand-300: var(--ink-2);
  --accent: var(--emerald);
  --accent-dim: var(--emerald-deep);
  --white: var(--ink);
  --font-display: var(--font);
  --font-body: var(--font);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: rgba(13, 154, 102, .18); }
b, strong { font-weight: 600; }
img { max-width: 100%; height: auto; }

/* Display type: the pages set font-family: var(--font-display) on headings,
   which now resolves to Geist. Match the homepage weight and tracking. */
h1, h2, h3 { font-weight: 500; letter-spacing: -.02em; }
h1 { letter-spacing: -.03em; }
h1 em, h2 em, h3 em { font-style: normal; color: var(--ink-soft); }
.blog-hero h1 em { color: var(--ink-soft) !important; font-style: normal !important; }
.blog-grid-header h3, .newsletter-text h3, .related-header h3 { font-style: normal !important; font-weight: 500 !important; letter-spacing: -.02em; }

/* ------------------------------------------------------------ the bar */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: 64px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding-inline: var(--gutter);
  background: rgba(251, 250, 247, .86);
  backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--hair); color: var(--ink);
}
.bar__mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; font-weight: 600; letter-spacing: -.01em; font-size: 15px; }
.bar__mark img { width: 22px; height: auto; display: block; }
.bar__links { display: flex; gap: 28px; justify-content: center; }
.bar__links a { color: var(--ink); text-decoration: none; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; opacity: .82; }
.bar__links a:hover, .bar__links a[aria-current] { opacity: 1; }
.bar__cta { justify-self: end; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 8px;
  font: 500 15px/1 var(--font); letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
  transition: transform 140ms var(--ease-out), background-color 140ms var(--ease-out);
  cursor: pointer; border: 0;
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--ink-2); }
.bar .btn { height: 38px; padding: 0 16px; font-size: 14px; }


/* --------------------------------------------------------- the footer */
.foot { margin-top: clamp(4rem, 10vh, 7rem); border-top: 1px solid var(--hair); padding-block: 3.5rem 2.5rem; }
.foot__wrap { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.foot__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem 4rem; }
.foot__brand img { width: 26px; height: auto; display: block; }
.foot__sub h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 500; letter-spacing: -.02em; margin: 1.4rem 0 1rem; max-width: 20ch; line-height: 1.15; }
.subscribe-form { display: flex; max-width: 26rem; border: 1px solid var(--hair-2); border-radius: 8px; overflow: hidden; background: #fff; }
.subscribe-form input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--ink); padding: 0 14px; height: 46px; font: 15px var(--font); }
.subscribe-form input::placeholder { color: var(--ink-soft); }
.subscribe-form button { background: transparent; border: 0; border-left: 1px solid var(--hair-2); color: var(--ink); padding: 0 16px; font: 500 14px var(--font); cursor: pointer; }
.subscribe-form button:hover { background: var(--paper-2); }
.foot__fine { font-size: 12.5px; color: var(--ink-soft); margin: .8rem 0 0; }
.foot__groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.foot__groups h4 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-family: var(--mono); font-weight: 500; color: var(--ink-soft); margin: 0 0 .9rem; }
.foot__groups ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.foot__groups a { color: var(--ink); text-decoration: none; font-size: 14.5px; }
.foot__groups a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot__legal { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; gap: .6rem 2rem; font-size: 12.5px; color: var(--ink-soft); }
.foot__legal a { color: inherit; }

@media (max-width: 960px) {
  .bar__links { display: none; }
  .bar { grid-template-columns: 1fr auto; }
  .foot__top { grid-template-columns: 1fr; }
  .foot__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }