/* ============================================================
   DailyMacroCalc — visual system
   Direction: athletic, confident, clinical-clean. Light theme,
   deep ink + energetic lime accent (health/energy without the
   cliche fitness red). Distinct from timer-amber, grimoire-violet,
   wheel-pink, calendar-teal.
   ============================================================ */

:root {
  --bg:        #f4f6f4;
  --bg-raised: #ffffff;
  --bg-ink:    #12241c;
  --line:      #e0e6e1;
  --line-soft: #eef2ee;

  --ink:       #12241c;
  --ink-dim:   #46574e;
  --ink-faint: #7d8b83;

  --lime:      #4ade80;
  --lime-deep: #16a34a;
  --lime-tint: #dcfce7;
  --ink-btn:   #12241c;

  --pro:  #16a34a;  /* protein */
  --carb: #f59e0b;  /* carbs */
  --fat:  #6366f1;  /* fat */

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow: 0 10px 34px -14px rgba(18,36,28,0.25);
  --shadow-sm: 0 3px 12px -5px rgba(18,36,28,0.18);

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-num: "Space Grotesk", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; display: flex; flex-direction: column; }
a { color: inherit; text-decoration: none; }
.site-shell { display: flex; flex-direction: column; min-height: 100vh; }

/* ---------------- Topbar ---------------- */
.topbar { display: flex; align-items: center; justify-content: space-between; max-width: 1040px; margin: 0 auto; width: 100%; padding: 1.1rem 1.5rem; }
.brand { display: flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--ink); letter-spacing: -0.02em; }
.brand-mark { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; background: var(--ink); position: relative; display: grid; place-items: center; }
.brand-mark::after { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--lime); }
.brand .lime { color: var(--lime-deep); }
.topnav { display: flex; gap: 1.4rem; font-size: 0.92rem; color: var(--ink-dim); font-weight: 500; }
.topnav a:hover { color: var(--lime-deep); }

/* ---------------- Layout ---------------- */
.main-content { flex: 1; max-width: 1040px; margin: 0 auto; width: 100%; padding: 0.5rem 1.5rem 5rem; }
.site-footer { border-top: 1px solid var(--line); padding: 1.75rem 1.5rem; margin-top: auto; background: var(--bg-raised); }
.footer-inner { max-width: 1040px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; font-size: 0.86rem; color: var(--ink-faint); }
.footer-links { display: flex; gap: 1.25rem; }
.footer-links a:hover { color: var(--lime-deep); }

/* ---------------- Hero ---------------- */
.hero { padding: 2.5rem 0 1.5rem; text-align: center; }
.eyebrow { display: inline-block; font-weight: 600; font-size: 0.78rem; color: var(--lime-deep); letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 0.7rem; }
.h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.03em; margin: 0 0 0.6rem; color: var(--ink); line-height: 1.05; }
.h1 .lime { color: var(--lime-deep); }
.sub { color: var(--ink-dim); font-size: 1.05rem; max-width: 52ch; margin: 0 auto; line-height: 1.5; }

/* ---------------- Calculator panel ---------------- */
.calc-panel { max-width: 640px; margin: 2rem auto 0; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow); }
.unit-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 1.5rem; }
.unit-toggle button { font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; padding: 0.45rem 1.1rem; border: none; background: var(--bg); color: var(--ink-dim); cursor: pointer; }
.unit-toggle button.active { background: var(--ink); color: #fff; }

.field-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.field { flex: 1; min-width: 130px; display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-size: 0.82rem; font-weight: 600; color: var(--ink-dim); }
.field input, .field select { font-family: var(--font-body); font-size: 1rem; padding: 0.7rem 0.85rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); }
.field input:focus, .field select:focus { outline: none; border-color: var(--lime-deep); background: #fff; }
.seg { display: inline-flex; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.seg button { flex: 1; font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; padding: 0.65rem 0.5rem; border: none; background: var(--bg); color: var(--ink-dim); cursor: pointer; }
.seg button.active { background: var(--lime-deep); color: #fff; }

.calc-btn { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; padding: 0.85rem 2rem; border-radius: 999px; border: none; background: var(--ink); color: #fff; cursor: pointer; transition: transform 0.12s ease, background 0.12s ease; width: 100%; margin-top: 0.5rem; }
.calc-btn:hover { background: var(--lime-deep); transform: translateY(-1px); }

.calc-result { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft); }
.result-big { font-family: var(--font-num); font-weight: 700; font-size: clamp(2.4rem, 8vw, 3.6rem); color: var(--lime-deep); line-height: 1; font-variant-numeric: tabular-nums; text-align: center; }
.result-unit { font-size: 1rem; color: var(--ink-faint); font-weight: 500; }
.result-note { color: var(--ink-dim); margin-top: 0.6rem; font-size: 0.96rem; text-align: center; }

/* macro breakdown bars */
.macro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-top: 1.25rem; }
.macro-cell { text-align: center; padding: 1rem 0.5rem; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--line); }
.macro-cell .g { font-family: var(--font-num); font-weight: 700; font-size: 1.8rem; line-height: 1; }
.macro-cell .lbl { font-size: 0.8rem; color: var(--ink-faint); margin-top: 0.3rem; }
.macro-cell.pro .g { color: var(--pro); }
.macro-cell.carb .g { color: var(--carb); }
.macro-cell.fat .g { color: var(--fat); }

/* BMI scale */
.bmi-scale { margin-top: 1rem; height: 10px; border-radius: 999px; background: linear-gradient(90deg, #60a5fa 0 18%, #4ade80 18% 40%, #f59e0b 40% 63%, #ef4444 63% 100%); position: relative; }
.bmi-marker { position: absolute; top: -5px; width: 3px; height: 20px; background: var(--ink); border-radius: 2px; transform: translateX(-50%); }

/* ---------------- Grids ---------------- */
.section-label { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; margin: 3rem 0 1.25rem; text-align: center; letter-spacing: -0.02em; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.85rem; }
.tool-card { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.4rem 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--bg-raised); transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; }
.tool-card:hover { border-color: var(--lime-deep); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.tool-card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); letter-spacing: -0.01em; }
.tool-card-title .arrow { color: var(--lime-deep); }
.tool-card-desc { font-size: 0.85rem; color: var(--ink-faint); line-height: 1.4; }
.chip-rail { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.chip { padding: 0.55rem 1.1rem; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-raised); font-size: 0.88rem; font-weight: 500; color: var(--ink-dim); transition: border-color 0.12s, color 0.12s; }
.chip:hover { border-color: var(--lime-deep); color: var(--lime-deep); }

/* ---------------- SEO content ---------------- */
.info-section { margin-top: 3.5rem; display: grid; gap: 2rem; max-width: 720px; margin-left: auto; margin-right: auto; }
.info-block h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; margin: 0 0 0.6rem; color: var(--ink); letter-spacing: -0.02em; }
.info-block p { color: var(--ink-dim); line-height: 1.7; margin: 0 0 0.75rem; font-size: 1rem; }
.faq-item { border-bottom: 1px solid var(--line-soft); padding: 1.1rem 0; }
.faq-item:last-child { border-bottom: none; }
.faq-q { font-weight: 600; font-size: 1rem; margin: 0 0 0.4rem; color: var(--ink); }
.faq-a { color: var(--ink-dim); font-size: 0.96rem; line-height: 1.6; margin: 0; }
.disclaimer { max-width: 720px; margin: 2rem auto 0; font-size: 0.82rem; color: var(--ink-faint); text-align: center; line-height: 1.5; }

/* ---------------- Static pages ---------------- */
.prose-page { max-width: 700px; margin: 0 auto; }
.prose-page h1 { font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; margin-bottom: 1rem; letter-spacing: -0.02em; }
.prose-page h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; margin: 1.75rem 0 0.6rem; }
.prose-page p { color: var(--ink-dim); line-height: 1.75; margin-bottom: 0.9rem; }
.prose-page a { color: var(--lime-deep); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }