/* tokens:start — approved D3 Foundation palette and shared tokens */
:root {
  --brand-teal: #2A9D8F; --brand-navy: #264653;
  --brand-yellow: #E9C46A; --brand-orange: #F4A261; --brand-coral: #E76F51;
  --color-ink: #264653; --color-ink-soft: #3A5560; --color-muted: #586A70;
  --color-primary: #2A9D8F; --color-primary-strong: #1D7A6C;
  --color-primary-tint: #E7F3F1; --color-primary-ring: rgba(42,157,143,.35);
  --color-accent-warm: #E9C46A; --color-accent-warm-2: #F4A261;
  --color-warn: #E76F51; --color-warn-strong: #C4482E;
  --color-warn-tint: #FCEBE4; --color-canvas: #FBF7F0;
  --color-surface: #FFFFFF; --color-surface-warm: #FAF3E8;
  --color-border: #E7DFD1; --color-border-strong: #D8CDB9;
  --color-focus: #143B45; --color-white: #FFFFFF;
  --color-teal-deep: #166054; --color-teal-border: #BFE1DB;
  --color-safety-border: #EFC3B4; --color-teal-hover: #D8ECE8;
  --color-footer-text: #EAF1F0; --color-footer-muted: #C3D3D1;
  --color-footer-link: #D7E5E3; --color-footer-legal: #9FB4B1;
  --color-teal-line: #CDE6E1;
  --app-bg: #EAEEEE; --app-surface: #FFFFFF; --app-border: #DCE3E3;
  --app-border-strong: #C6D0D0; --side-bg: #22414C;
  --side-ink: #D1DBDE; --side-active: #8FD8CC; --app-row: #F6F8F8;
  --category-nutrition: #3D8B57; --category-nutrition-tint: #E9F1E6; --category-nutrition-ink: #3D6B39;
  --category-fitness: #C9922F; --category-fitness-tint: #FBF3DD; --category-fitness-ink: #7A5A12;
  --category-science: #3F7C86; --category-science-tint: #E6EEF0; --category-science-ink: #2A5560;
  --category-lifestyle: #D98A3D; --category-lifestyle-tint: #FBEEDF; --category-lifestyle-ink: #A0531F;
  --category-conditions: #8A5170; --category-conditions-tint: #F2EAEE; --category-conditions-ink: #6E3A56;
  --font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --text-h1: 2.5rem; --text-h2: 1.875rem; --text-h3: 1.5rem; --text-h4: 1.25rem;
  --text-body: 1.125rem; --text-small: .9375rem; --text-caption: .8125rem;
  --leading-tight: 1.2; --leading-snug: 1.4; --leading-body: 1.7;
  --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(38,70,83,.06), 0 1px 3px rgba(38,70,83,.08);
  --shadow-md: 0 4px 10px rgba(38,70,83,.07), 0 10px 24px rgba(38,70,83,.06);
  --max-prose: 42rem; --max-content: 72rem;
  /* Compatibility aliases for existing PHP templates during migration. */
  --color-dark: var(--color-ink); --color-accent-1: var(--color-accent-warm);
  --color-accent-2: var(--color-accent-warm-2); --color-accent-3: var(--color-warn);
  --color-bg: var(--color-surface); --color-text: var(--color-ink);
  --font-body: var(--font-sans); --radius: var(--radius-sm); --measure: 70ch;
}
/* tokens:end */

/* Every rule below the token block uses var(--…) only — no raw hex (enforced
   by scripts/check-tokens.sh). Callout tints derive from the accent tokens via
   color-mix so a palette change stays a one-block edit. */

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
}

[x-cloak] { display: none !important; }

a { color: var(--color-primary); }
a:hover { color: var(--color-dark); }

img { max-width: 100%; height: auto; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-dark);
  color: var(--color-bg);
  padding: var(--space-2) var(--space-3);
}
.skip-link:focus { left: 0; z-index: 10; }

.container {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 var(--space-3);
}

/* --- header / nav / footer ------------------------------------------- */

.site-header {
  border-bottom: 1px solid color-mix(in srgb, var(--color-dark) 15%, transparent);
  background: var(--color-bg);
}
.site-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
.site-logo {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-dark);
  text-decoration: none;
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-right: auto;
}
.site-nav a { text-decoration: none; }
.site-search { display: flex; gap: var(--space-2); }
.site-search input {
  padding: var(--space-2);
  border: 1px solid color-mix(in srgb, var(--color-dark) 30%, transparent);
  border-radius: var(--radius);
  font: inherit;
}
.button {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  background: var(--color-primary);
  color: var(--color-bg);
  border: 0;
  border-radius: var(--radius);
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}

.site-footer {
  margin-top: var(--space-5);
  padding: var(--space-4) 0;
  border-top: 1px solid color-mix(in srgb, var(--color-dark) 15%, transparent);
  color: var(--color-muted);
  font-size: .9rem;
}
.site-footer .container { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* --- generic layout -------------------------------------------------- */

main { padding: var(--space-4) 0; }

.prose { max-width: var(--measure); }
.prose h1, .prose h2, .prose h3 { line-height: 1.25; color: var(--color-dark); }
.prose table { border-collapse: collapse; width: 100%; }
.prose th, .prose td { border: 1px solid color-mix(in srgb, var(--color-dark) 20%, transparent); padding: var(--space-2); text-align: left; }

.breadcrumbs { font-size: .85rem; color: var(--color-muted); margin-bottom: var(--space-3); }
.breadcrumbs a { text-decoration: none; }

/* --- article --------------------------------------------------------- */

.article-hero img { width: 100%; border-radius: var(--radius); }

.byline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-3) 0;
  padding: var(--space-3) 0;
  border-top: 1px solid color-mix(in srgb, var(--color-dark) 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-dark) 12%, transparent);
  font-size: .9rem;
}
.byline .reviewed-by { color: var(--color-dark); font-weight: 600; }

.toc {
  border: 1px solid color-mix(in srgb, var(--color-dark) 15%, transparent);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}
.toc > strong { display: block; margin-bottom: var(--space-2); }
.toc ol { margin: 0; padding-left: var(--space-3); }
.toc button { display: none; }

.disclaimer {
  margin: var(--space-4) 0;
  padding: var(--space-3);
  border-left: 4px solid var(--color-accent-3);
  background: color-mix(in srgb, var(--color-accent-3) 8%, var(--color-bg));
  font-size: .9rem;
}

.faq { margin: var(--space-4) 0; }
.faq details {
  border-bottom: 1px solid color-mix(in srgb, var(--color-dark) 12%, transparent);
  padding: var(--space-2) 0;
}
.faq summary { cursor: pointer; font-weight: 600; }

.article-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0; }
.article-tags .tag {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg));
  color: var(--color-dark);
  text-decoration: none;
  font-size: .85rem;
}

.related ul { list-style: none; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.related li { border: 1px solid color-mix(in srgb, var(--color-dark) 12%, transparent); border-radius: var(--radius); padding: var(--space-3); }

/* --- callouts (info | tip | warning | safety) ------------------------ */

.callout {
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg));
}
.callout--info { border-left-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg)); }
.callout--tip { border-left-color: var(--color-accent-1); background: color-mix(in srgb, var(--color-accent-1) 14%, var(--color-bg)); }
.callout--warning { border-left-color: var(--color-accent-2); background: color-mix(in srgb, var(--color-accent-2) 14%, var(--color-bg)); }
.callout--safety { border-left-color: var(--color-accent-3); background: color-mix(in srgb, var(--color-accent-3) 12%, var(--color-bg)); }
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }

/* --- lists / cards / pagination / search ----------------------------- */

.page-title { color: var(--color-dark); }
.card-grid { list-style: none; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.card { border: 1px solid color-mix(in srgb, var(--color-dark) 12%, transparent); border-radius: var(--radius); padding: var(--space-3); }
.card h2 { margin-top: 0; font-size: 1.15rem; }
.card a { text-decoration: none; }

.category-grid { list-style: none; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.category-grid a {
  display: block;
  padding: var(--space-3);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg));
  color: var(--color-dark);
  text-decoration: none;
  font-weight: 600;
}

.pagination { display: flex; gap: var(--space-3); margin: var(--space-4) 0; align-items: center; }
.pagination .muted { color: var(--color-muted); }

.empty-state { color: var(--color-muted); padding: var(--space-4) 0; }

.author-profile { margin-bottom: var(--space-4); }
.author-profile .credentials { color: var(--color-muted); }
.author-profile .sameas { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; padding: 0; }

@media (max-width: 40rem) {
  .toc ol { display: none; }
  .toc.is-open ol { display: block; }
  .toc button {
    display: inline-block;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
  }
  .toc > strong { display: none; }
}