/* ───────────────────────────────────────────────
   Happy Guts — design tokens & base
   Warm-neutral canvas + one bright "spark" accent.
   ─────────────────────────────────────────────── */
:root {
  /* canvas / ink */
  --bg:        oklch(0.973 0.010 80);
  --bg-2:      oklch(0.951 0.013 74);
  --card:      #ffffff;
  --ink:       oklch(0.255 0.016 55);
  --ink-2:     oklch(0.455 0.013 55);
  --ink-3:     oklch(0.630 0.010 58);
  --line:      oklch(0.905 0.009 74);
  --line-2:    oklch(0.855 0.011 74);

  /* brand spark (coral) — energetic + friendly */
  --spark:       oklch(0.660 0.200 33);
  --spark-press: oklch(0.585 0.190 32);
  --spark-tint:  oklch(0.945 0.045 40);
  --spark-ink:   oklch(0.470 0.150 32);

  /* verdict semantics */
  --safe:        oklch(0.610 0.130 156);
  --safe-tint:   oklch(0.945 0.050 156);
  --safe-ink:    oklch(0.430 0.110 156);
  --caution:     oklch(0.760 0.140 78);
  --caution-tint:oklch(0.952 0.058 84);
  --caution-ink: oklch(0.520 0.110 70);
  --avoid:       oklch(0.585 0.205 29);
  --avoid-tint:  oklch(0.940 0.055 33);
  --avoid-ink:   oklch(0.470 0.165 30);

  /* compound level ramp (Nil → V.High) */
  --lv-nil:   oklch(0.700 0.120 156);
  --lv-low:   oklch(0.800 0.135 130);
  --lv-med:   oklch(0.825 0.145 82);
  --lv-high:  oklch(0.720 0.175 50);
  --lv-vhigh: oklch(0.600 0.205 30);
  --lv-off:   oklch(0.890 0.008 74);
  --lv-unknown: oklch(0.720 0.004 74);   /* grey: no researched value yet */

  /* compound identity hues (for section accents) */
  --c-gluten:      oklch(0.660 0.140 60);
  --c-salicylates: oklch(0.620 0.160 350);
  --c-oxalates:    oklch(0.560 0.150 270);
  --c-amines:      oklch(0.620 0.130 200);

  --r-sm: 14px;
  --r:    20px;
  --r-lg: 28px;
  --r-xl: 34px;

  --shadow-1: 0 1px 2px rgba(40,30,20,.05), 0 2px 8px rgba(40,30,20,.05);
  --shadow-2: 0 2px 6px rgba(40,30,20,.06), 0 10px 28px rgba(40,30,20,.08);
  --shadow-pop: 0 8px 30px rgba(40,30,20,.16);

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

.app-root {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  height: 100%;
}

.app-root h1, .app-root h2, .app-root h3, .app-root .display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.08;
}
.app-root p { margin: 0; }

.mono {
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── scroll area ── */
.scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.scroll::-webkit-scrollbar { display: none; }

/* ── card ── */
.card {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
}

/* ── buttons ── */
.btn {
  font-family: var(--font-body);
  font-weight: 700;
  border: none;
  cursor: pointer;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-spark {
  background: var(--spark);
  color: #fff;
  box-shadow: 0 4px 14px oklch(0.66 0.20 33 / .35);
}
.btn-spark:active { background: var(--spark-press); }
.btn-ghost {
  background: var(--card);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line-2);
}
.btn-block { width: 100%; padding: 16px; font-size: 17px; }

/* ── placeholder imagery ── */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(135deg,
      oklch(0.90 0.012 70) 0 8px,
      oklch(0.93 0.010 70) 8px 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ph span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-transform: uppercase;
  text-align: center;
  padding: 4px 8px;
  background: rgba(255,255,255,.7);
  border-radius: 6px;
}

/* hide native focus ring, keep accessible outline on keyboard */
.app-root :focus { outline: none; }
.app-root button { font-family: inherit; }