/* Baby Diversification — design tokens
   Direction: warm-soft (Stripe pre-2020 / Headspace),
   adapted for a daily-use parenting health companion.
   Accent dialed slightly warmer (rust/terracotta) for credibility
   without entering pastel-baby territory. */

:root {
  /* Surfaces — light */
  --bg:        oklch(97% 0.018 70);   /* cream paper */
  --surface:   oklch(99.5% 0.006 70); /* card surface */
  --surface-2: oklch(94% 0.014 70);   /* recessed surface */
  --fg:        oklch(22% 0.02 50);    /* deep ink, warm undertone */
  --fg-2:      oklch(34% 0.018 50);   /* secondary ink */
  --muted:     oklch(52% 0.014 50);   /* tertiary text */
  --border:    oklch(89% 0.014 70);   /* hairline */
  --border-2:  oklch(82% 0.014 70);   /* stronger divider */

  /* Accent — terracotta. Used at most twice per screen. */
  --accent:        oklch(60% 0.14 32);
  --accent-soft:   oklch(94% 0.04 35);
  --accent-ink:    oklch(38% 0.12 30);

  /* Signal colors (health data, Oura-style) */
  --liked:         oklch(56% 0.10 150);
  --liked-soft:    oklch(94% 0.035 150);
  --neutral:       oklch(66% 0.08 80);
  --neutral-soft:  oklch(95% 0.03 85);
  --disliked:      oklch(56% 0.12 28);
  --disliked-soft: oklch(94% 0.035 28);
  --allergen:      oklch(58% 0.15 55);
  --allergen-soft: oklch(95% 0.04 60);
  --new:           oklch(54% 0.12 250);
  --new-soft:      oklch(94% 0.025 250);

  /* Typography */
  --font-display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', 'Inter Display', system-ui, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  --font-num:     'SF Pro Display', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Type scale (mobile-first, larger than typical) */
  --t-12: 12px;
  --t-13: 13px;
  --t-14: 14px;
  --t-16: 16px;  /* body min */
  --t-17: 17px;  /* body default */
  --t-19: 19px;
  --t-22: 22px;
  --t-26: 26px;
  --t-30: 30px;
  --t-36: 36px;
  --t-44: 44px;

  /* Spacing scale */
  --s-2: 2px;
  --s-4: 4px;
  --s-6: 6px;
  --s-8: 8px;
  --s-10: 10px;
  --s-12: 12px;
  --s-14: 14px;
  --s-16: 16px;
  --s-20: 20px;
  --s-24: 24px;
  --s-28: 28px;
  --s-32: 32px;
  --s-40: 40px;
  --s-48: 48px;
  --s-64: 64px;

  /* Radii */
  --r-6: 6px;
  --r-10: 10px;
  --r-14: 14px;
  --r-20: 20px;
  --r-28: 28px;
  --r-pill: 999px;

  /* Elevation — used very sparingly */
  --shadow-1: 0 1px 2px oklch(20% 0.02 50 / 0.04), 0 4px 12px oklch(20% 0.02 50 / 0.03);
  --shadow-2: 0 2px 6px oklch(20% 0.02 50 / 0.06), 0 12px 32px oklch(20% 0.02 50 / 0.05);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 160ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;
}

/* Dark — evening use, parent at 22h, low light */
.dark {
  --bg:        oklch(18% 0.012 60);
  --surface:   oklch(22% 0.014 60);
  --surface-2: oklch(26% 0.014 60);
  --fg:        oklch(94% 0.012 70);
  --fg-2:      oklch(80% 0.014 70);
  --muted:     oklch(62% 0.014 60);
  --border:    oklch(30% 0.014 60);
  --border-2:  oklch(36% 0.014 60);

  --accent:        oklch(72% 0.13 32);
  --accent-soft:   oklch(34% 0.06 35);
  --accent-ink:    oklch(82% 0.10 32);

  --liked:         oklch(70% 0.11 150);
  --liked-soft:    oklch(30% 0.045 150);
  --neutral:       oklch(76% 0.09 80);
  --neutral-soft:  oklch(32% 0.04 85);
  --disliked:      oklch(70% 0.12 28);
  --disliked-soft: oklch(32% 0.045 28);
  --allergen:      oklch(72% 0.14 55);
  --allergen-soft: oklch(32% 0.05 60);
  --new:           oklch(70% 0.12 250);
  --new-soft:      oklch(28% 0.035 250);

  --shadow-1: 0 1px 2px #0008, 0 8px 24px #0006;
  --shadow-2: 0 2px 6px #0009, 0 16px 40px #0007;
}

/* Base — used by every screen */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--t-17);
  line-height: 1.45;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* Status bar (iOS-style, drawn into each screen) */
.status-bar {
  height: 50px;
  padding: 18px 28px 0;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.status-bar .icons { display: flex; gap: 6px; align-items: center; opacity: 0.95; }
.status-bar svg { display: block; }

/* Bottom nav — iOS 26 Liquid Glass floating pill */
.tabbar {
  position: absolute;
  left: 14px; right: 14px;
  bottom: calc(env(safe-area-inset-bottom, 14px) + 10px);
  padding: 6px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: color-mix(in oklab, var(--surface), transparent 78%);
  -webkit-backdrop-filter: blur(40px) saturate(190%);
  backdrop-filter: blur(40px) saturate(190%);
  border: 0.5px solid color-mix(in oklab, var(--fg), transparent 90%);
  border-radius: 28px;
  box-shadow:
    0 1px 0 color-mix(in oklab, white, transparent 70%) inset,
    0 12px 32px -8px color-mix(in oklab, var(--fg), transparent 80%),
    0 2px 8px -2px color-mix(in oklab, var(--fg), transparent 88%);
}
.dark .tabbar {
  background: color-mix(in oklab, var(--surface), transparent 72%);
  border-color: color-mix(in oklab, white, transparent 86%);
  box-shadow:
    0 1px 0 color-mix(in oklab, white, transparent 86%) inset,
    0 14px 36px -8px rgba(0,0,0,0.55),
    0 2px 8px -2px rgba(0,0,0,0.4);
}
.tabbar button {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 8px 4px 6px;
  border-radius: 22px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--muted);
  min-height: 44px;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.tabbar button.active {
  color: var(--accent);
  background: color-mix(in oklab, var(--accent), transparent 88%);
}
.tabbar button:active { transform: scale(0.96); }
.tabbar button svg { width: 22px; height: 22px; stroke-width: 1.7; }

/* Pills */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: var(--t-12);
  font-weight: 500;
  line-height: 1;
  background: var(--surface-2);
  color: var(--fg-2);
}
.pill.allergen { background: var(--allergen-soft); color: var(--allergen); }
.pill.new      { background: var(--new-soft);      color: var(--new); }
.pill.liked    { background: var(--liked-soft);    color: var(--liked); }
.pill.neutral  { background: var(--neutral-soft);  color: var(--neutral); }
.pill.disliked { background: var(--disliked-soft); color: var(--disliked); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: var(--t-17);
  letter-spacing: -0.005em;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--fg); color: var(--bg); }
.btn-primary.accent { background: var(--accent); color: oklch(99% 0.005 70); }
.btn-secondary { background: var(--surface-2); color: var(--fg); }
.btn-ghost { color: var(--accent-ink); }

/* Lucide-style line icons (24px, stroke 1.6) */
.icon { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }