/* ==========================================================================
   kaloria.ai /tools/ — reskin into the shared Kaloria design (2026-10-10).
   Loaded AFTER /static/css/global.css + components.css and the shell's inline styles, so it wins on
   equal specificity. It only remaps tokens and restyles shared classes: no tool HTML, JS or string
   changes, nothing to re-translate. Requires /assets/ui/kaloria-ui.css (tokens + fonts + chrome).
   ========================================================================== */

/* ---------- token remap: legacy → Kaloria design ---------- */
:root {
  --color-foreground: var(--kui-ink);
  --color-foreground-muted: var(--kui-gray);
  --color-foreground-lighter: var(--kui-ink-3);
  --color-background: var(--kui-white);
  --color-background-alt: var(--kui-band);
  --color-background-elevated: var(--kui-white);
  --color-primary: var(--kui-accent);          /* #077a55: AA for text and white-on-green buttons */
  --color-primary-hover: var(--kui-accent-2);
  --color-primary-light: var(--kui-brand);
  --color-primary-lighter: #6ee7b7;
  --primary-5: rgb(7 122 85 / .05);
  --primary-10: rgb(7 122 85 / .1);
  --primary-20: rgb(7 122 85 / .2);
  --primary-30: rgb(7 122 85 / .3);
  --primary-90: rgb(7 122 85 / .9);
  --color-border: var(--kui-hair-2);
  --color-text-muted: var(--kui-gray);
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-2xl: 28px;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .04);
  --shadow-md: var(--kui-shadow-card);
  --shadow-lg: var(--kui-shadow-card);
}

html { background: var(--kui-white); }
body {
  font-family: var(--kui-font-text);
  color: var(--kui-ink);
  background: var(--kui-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, .hero-title, .text-h2, .text-h3 {
  font-family: var(--kui-font-display);
  letter-spacing: var(--kui-track-head);
  text-wrap: balance;
}
p, .text-body { text-wrap: pretty; }
::selection { background: var(--kui-mint); color: var(--kui-ink); }
:focus-visible { outline: 2px solid var(--kui-accent); outline-offset: 3px; }

/* ---------- header: the legacy nav becomes the floating pill ---------- */
.site-nav {
  position: sticky; inset-block-start: .55rem; z-index: 50;
  inline-size: min(100% - 2 * var(--kui-gutter), var(--kui-wrap)); margin: .55rem auto 0;
  min-block-size: 58px; padding: .4rem .6rem .4rem 1rem; border-radius: 999px;
  background: rgb(255 255 255 / .82); backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid var(--kui-hair-2); box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 14px 34px -20px rgb(0 0 0 / .22);
  gap: .75rem;
}
.site-nav .logo {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--kui-font-display); font-weight: 650; font-size: 1.08rem; color: var(--kui-ink); letter-spacing: var(--kui-track-head);
}
.site-nav .logo::before {
  content: ""; inline-size: 30px; block-size: 30px; border-radius: 9px; flex: none;
  background: url("/assets/ui/img/logo-192.png") center / cover no-repeat;
}
.site-nav .tools-nav-end { display: flex; align-items: center; gap: .4rem; margin-inline-start: auto; }
.site-nav .tools-nav-link { padding: .5rem .7rem; border-radius: 999px; font-size: .86rem; color: var(--kui-ink-2); text-decoration: none; white-space: nowrap; }
.site-nav .tools-nav-link:hover { background: color-mix(in srgb, var(--kui-accent) 11%, transparent); color: var(--kui-accent-2); }
.lang-picker-btn { border-radius: 999px !important; border-color: var(--kui-hair) !important; font-family: var(--kui-font-label); }
.lang-picker-dropdown { border-radius: var(--kui-r-md) !important; box-shadow: var(--kui-shadow-card), 0 24px 48px -20px rgb(0 0 0 / .25) !important; border-color: var(--kui-hair-2) !important; }
@media (max-width: 640px) {
  .site-nav { padding-inline-start: .7rem; }
  .site-nav .tools-nav-link { display: none; }
  .site-nav .kui-btn { padding: .55rem .85rem; font-size: .8rem; }
}

.breadcrumbs {
  inline-size: min(100% - 2 * var(--kui-gutter), var(--kui-wrap)); margin: 1rem auto 0; padding: 0;
  background: none; border: 0; font-family: var(--kui-font-label); font-size: .8rem;
}
.breadcrumbs a { color: var(--kui-accent); }

/* ---------- tool body ---------- */
main { max-inline-size: 60rem; }
.hero {
  border-radius: var(--kui-r-xl) !important;
  background: linear-gradient(135deg, var(--kui-band) 0%, #ecfdf5 100%) !important;
  border: 0 !important;
  padding-block: clamp(2rem, 5vw, 3.5rem) !important;
}
.hero-title { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem) !important; font-weight: 650 !important; letter-spacing: var(--kui-track-display) !important; color: var(--kui-ink) !important; }
.hero-subtitle { font-size: var(--kui-step-1) !important; color: var(--kui-ink-2) !important; line-height: 1.42; }
.text-h2 { font-size: var(--kui-step-3) !important; font-weight: 650 !important; }
.text-h3 { font-weight: 650 !important; }
.text-body { color: var(--kui-ink-2); line-height: 1.65; }

.form-label { font-family: var(--kui-font-label); font-weight: 500; letter-spacing: var(--kui-track-label); color: var(--kui-ink); }
.form-input, .form-select {
  border-radius: 12px !important; border: 1px solid var(--kui-hair) !important; background: var(--kui-white) !important;
  font-family: var(--kui-font-label); font-variant-numeric: tabular-nums; min-block-size: 46px;
}
.form-input:focus, .form-select:focus { border-color: var(--kui-accent) !important; box-shadow: 0 0 0 3px rgb(7 122 85 / .15) !important; outline: none; }
.form-hint { color: var(--kui-gray); }

.unit-toggle-btn, .gender-btn, [class*="toggle-btn"] { border-radius: 999px !important; font-family: var(--kui-font-label); }
.unit-toggle-btn.active, [class*="toggle-btn"].active, [class*="toggle-btn"][aria-pressed="true"] { background: var(--kui-accent) !important; border-color: var(--kui-accent) !important; color: #fff !important; }

.btn-primary, button[type="submit"].btn, .calculate-btn {
  border-radius: 999px !important; background: var(--kui-accent) !important; border-color: var(--kui-accent) !important;
  color: #fff !important; font-family: var(--kui-font-text); font-weight: 500; min-block-size: 48px;
  transition: transform .2s var(--kui-ease), background .2s;
}
.btn-primary:hover { background: var(--kui-accent-2) !important; transform: translateY(-1px); }
.btn-secondary { border-radius: 999px !important; border-color: var(--kui-hair) !important; color: var(--kui-ink) !important; }

.result-card, .med-card-stat, .serving-card, .food-card, .quick-ref-item, .nutrient-item {
  border-radius: var(--kui-r-md) !important; border: 1px solid var(--kui-hair-2) !important; box-shadow: none !important;
  background: var(--kui-band) !important;
}
.result-value, .med-card-stat-value, .serving-card-value { font-family: var(--kui-font-label); font-variant-numeric: tabular-nums; letter-spacing: var(--kui-track-head); color: var(--kui-ink); }
.result-label, .med-card-stat-label { font-family: var(--kui-font-label); letter-spacing: var(--kui-track-label); color: var(--kui-gray); }
.result-unit { color: var(--kui-gray); }
.chart-bar-fill { background: var(--kui-brand) !important; }

/* app CTA block */
.cta-section {
  border-radius: var(--kui-r-xl) !important; border: 0 !important;
  background: linear-gradient(135deg, var(--kui-band) 0%, #ecfdf5 100%) !important; box-shadow: none !important;
}
.cta-section h2, .cta-section h3 { font-family: var(--kui-font-display); font-weight: 650; letter-spacing: var(--kui-track-display); }
.cta-button { border-radius: 999px !important; background: var(--kui-accent) !important; color: #fff !important; }
.cta-button:hover { background: var(--kui-accent-2) !important; }
.cta-image img { border-radius: var(--kui-r-lg); }

/* FAQ */
.faq-item, details.faq-item {
  border-radius: 0 !important; border: 0 !important; border-block-start: 1px solid var(--kui-hair) !important; background: none !important; box-shadow: none !important;
}
.faq-item summary, .faq-question { font-family: var(--kui-font-display); font-weight: 650; letter-spacing: var(--kui-track-head); }

/* related calculators */
.related-tools h2 { font-family: var(--kui-font-display); font-weight: 650; }
.related-tool-card {
  border-radius: var(--kui-r-md) !important; border: 0 !important; background: var(--kui-band) !important; box-shadow: none !important;
  transition: transform .2s var(--kui-ease), background .2s;
}
.related-tool-card:hover { transform: translateY(-2px); background: var(--kui-mint) !important; }
.related-tool-card h3 { color: var(--kui-ink) !important; font-family: var(--kui-font-display); }
.related-tool-card p { color: var(--kui-gray) !important; }

/* legacy footer (replaced by the shared footer when present) */
body > footer:not(.kui-footer) { background: var(--kui-band); border-top: 0; color: var(--kui-gray); font-family: var(--kui-font-text); }
body > footer:not(.kui-footer) a { color: var(--kui-accent); }

/* mobile sticky download bar */
.mobile-app-bar { border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px -12px rgb(0 0 0 / .25); }
.mobile-app-bar a, .mobile-app-bar .btn { border-radius: 999px !important; }

/* hub page (tools index) */
.tool-card, .tools-grid > a, .category-card {
  border-radius: var(--kui-r-md) !important; border: 1px solid var(--kui-hair-2) !important; box-shadow: none !important;
}
.tool-card:hover, .tools-grid > a:hover { background: var(--kui-band) !important; }

@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover, .related-tool-card:hover { transform: none; }
}

/* language-suggestion banner (inline-styled by the shell script): AA green instead of #10B981 (2.5:1) */
body > div[style*="#10B981"] { background: var(--kui-accent) !important; }
/* footer links must not rely on colour alone */
body > footer:not(.kui-footer) a { text-decoration: underline; text-underline-offset: 2px; }