/* GoodHealthStack — shared design system (per UI/UX Design Brief doc 04)
   Light-primary, calm clinical-warm, teal accent. Dark mode supported.
   Vanilla CSS only: no framework, no external fonts, no build step. */

/* ---------- Tokens: light (primary) ---------- */
:root{
  color-scheme: light;
  --bg:#f6f9f8;
  --surface:#ffffff;
  --ink:#0f1b2d;
  --muted:#566579;
  --line:#e3eae8;
  --accent:#0f766e;          /* teal-700: AA both as fill(white text) & text-on-light */
  --accent-hover:#115e59;
  --accent-ink:#ffffff;
  --ok:#12b981;              /* progress within budget (decorative) */
  --warn:#dc4b3e;            /* over budget */
  --info-bg:#edf6f4;         /* soft teal tint: hero panel, callouts */
  --ghost-bg:#eef2f1;
  --ghost-hover:#e3e9e7;
  --shadow-sm:0 1px 2px rgba(15,27,45,.04);
  --shadow-md:0 4px 16px rgba(15,27,45,.06);
  --radius:16px;
  --radius-sm:12px;
}
/* ---------- Tokens: dark (opt-in via toggle; NOT auto by OS) ---------- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0e1526; --surface:#152036; --ink:#eaf1ff; --muted:#93a1c4; --line:#233150;
  --accent:#2ec4a6; --accent-hover:#43d6b9; --accent-ink:#04241f;
  --ok:#2ec4a6; --warn:#ff6b6b; --info-bg:#14233a;
  --ghost-bg:#20304f; --ghost-hover:#28385c;
  --shadow-sm:0 1px 2px rgba(0,0,0,.25); --shadow-md:0 6px 20px rgba(0,0,0,.30);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);line-height:1.6;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
}
header,main,footer,nav{max-width:800px;margin:0 auto;padding:16px 20px}
h1{font-size:clamp(1.55rem,4.5vw,2rem);font-weight:750;letter-spacing:-.01em;margin:.15em 0;text-wrap:balance}
h2{font-size:clamp(1.1rem,2.6vw,1.3rem);font-weight:680;margin-top:1.6em;text-wrap:balance}
h3{font-weight:650;text-wrap:balance}
p{color:var(--muted);text-wrap:pretty}
li{color:var(--muted)}
a{color:var(--accent);text-underline-offset:2px}
strong,b{color:var(--ink)}

/* ---------- Top nav / header ---------- */
.topnav{padding-bottom:0}
.topnav a{color:var(--muted);text-decoration:none;font-size:.9rem;font-weight:550}
.topnav a:hover{color:var(--accent)}
.lede{color:var(--muted);font-size:1.05rem;max-width:60ch}

/* ---------- Cards / surfaces ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;margin:16px 0;box-shadow:var(--shadow-sm),var(--shadow-md);
}

/* ---------- Forms ---------- */
label{display:block;color:var(--muted);font-size:.9rem;font-weight:550;margin:10px 0 6px}
input,select{
  width:100%;min-height:48px;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 13px;font-size:1rem;
}
input:hover,select:hover{border-color:var(--accent)}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row>div{flex:1;min-width:150px}

/* ---------- Buttons ---------- */
button{
  background:var(--accent);color:var(--accent-ink);border:none;border-radius:var(--radius-sm);
  padding:12px 18px;min-height:46px;font-size:1rem;font-weight:650;cursor:pointer;
  touch-action:manipulation;transition:background-color .15s,transform .05s,box-shadow .15s;
}
button:hover{background:var(--accent-hover);box-shadow:var(--shadow-md)}
button:active{transform:translateY(1px)}
button.ghost{background:var(--ghost-bg);color:var(--ink)}
button.ghost:hover{background:var(--ghost-hover);box-shadow:none}

/* ---------- Hero result ---------- */
.result{
  background:var(--info-bg);border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  font-size:clamp(2.2rem,7vw,3rem);font-weight:800;color:var(--accent);line-height:1.05;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.result .big{display:block;font-size:1rem;font-weight:500;color:var(--muted);margin-top:6px;letter-spacing:0}

/* ---------- Progress bar + badge ---------- */
.bar{height:14px;background:var(--info-bg);border-radius:999px;overflow:hidden;border:1px solid var(--line);margin:10px 0}
.bar>span{display:block;height:100%;background:var(--ok);width:100%;transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.badge{display:inline-block;font-size:.8rem;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--info-bg);color:var(--accent);font-variant-numeric:tabular-nums}
.badge.over{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn)}
.over{color:var(--warn)!important}

/* ---------- Meal rows ---------- */
.meals{margin-top:10px}
.meal{display:flex;gap:10px;align-items:center;margin:8px 0}
.meal input{width:96px;min-height:44px}
.meal>span:first-child{font-weight:550}

/* ---------- Ad slots (de-emphasized) ---------- */
/* Ad slots hidden until AdSense is approved (set adsense_client in config.json → rebuild) */
.adslot{
  display:none;min-height:90px;align-items:center;justify-content:center;
  color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius-sm);
  margin:16px 0;font-size:.8rem;opacity:.75;
}
:root[data-ads="on"] .adslot{display:flex}

/* ---------- Disclaimer / callout ---------- */
.disclaimer{
  font-size:.86rem;background:var(--info-bg);border:1px solid var(--line);
  border-left:3px solid var(--accent);color:var(--muted);border-radius:10px;padding:12px 14px;
}
.disclaimer b{color:var(--ink)}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;font-size:.94rem;font-variant-numeric:tabular-nums}
td,th{border-bottom:1px solid var(--line);padding:9px 8px;text-align:left;color:var(--ink)}
th{color:var(--muted);font-weight:600}
tbody tr:last-child td{border-bottom:none}

/* ---------- Result helper line ---------- */
.result,.badge,.meal input,td{font-variant-numeric:tabular-nums}

/* ---------- Footer ---------- */
.fine{font-size:.85rem;color:var(--muted)}
footer{border-top:1px solid var(--line);margin-top:24px}

/* ---------- Hub directory grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin:16px 0}
.toolcard{
  display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm);
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.toolcard:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.toolcard h3{margin:.2em 0;font-size:1.08rem}
.toolcard p{margin:.3em 0 0;font-size:.9rem}

/* ---------- FAQ ---------- */
.faq h3{font-size:1rem;margin:1em 0 .2em;color:var(--ink)}
.faq p{margin:.2em 0 .6em}

/* ---------- Accessibility: focus, skip link, motion ---------- */
:where(a,button,input,select,.toolcard):focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
input:focus-visible,select:focus-visible{outline-offset:0;border-color:var(--accent)}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--accent-ink);padding:10px 14px;border-radius:0 0 10px 0;font-weight:700;z-index:10}
.skip:focus{left:0}
/* theme toggle */
.theme-toggle{position:fixed;top:12px;right:12px;z-index:20;min-height:0;padding:8px 11px;font-size:1rem;line-height:1;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow-sm);cursor:pointer}
.theme-toggle:hover{background:var(--surface);border-color:var(--accent);box-shadow:var(--shadow-md)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Responsive ---------- */
@media (max-width:520px){
  body{font-size:16px}
  .row>div{min-width:100%}
  header,main,footer,nav{padding:14px 16px}
}