/* ============================================================
   PawsIQ — base.css
   Design tokens + shared primitives. Premium, Apple-like.
   Calm, minimal, refined. No childish/toy styling.
   ============================================================ */

:root {
  /* ---- Color (warm, premium, calming) ---- */
  --bg:            #FAF7F2;   /* warm cream */
  --surface:       #FFFFFF;   /* white card */
  --surface-2:     #F5F1EA;   /* subtle warm panel */
  --ink:           #2C2825;   /* warm dark text */
  --ink-soft:      #8B7F76;   /* muted warm grey (secondary) */
  --ink-faint:     #BFB5AB;   /* warm faint (hints) */
  --line:          #E8E1D8;   /* warm hairline border */

  /* Brand hues — semantic, see REBUILD.md §6.6 */
  --primary:       #4A90E2;   /* refined blue — primary cards / main actions */
  --primary-press: #3A7BC8;
  --accent:        #F5C842;   /* warm yellow — hear / listen actions */
  --accent-press:  #E0B528;
  --warmth:        #C4895F;   /* terracotta — love / talk-back / emotion */
  --calm:          #7A9B6E;   /* sage green — calm / wellness / bedtime */
  --danger:        #D9614A;   /* soft warm red — STOP only */
  --ok:            #7A9B6E;   /* reuse sage for success */

  /* Ink that reads on colored fills */
  --on-primary:    #FFFFFF;
  --on-accent:     #2C2825;   /* dark ink on yellow for contrast */

  /* ---- Type ---- */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif;
  --fs-hero:   clamp(2rem, 6vw, 3.25rem);
  --fs-title:  clamp(1.4rem, 4vw, 2rem);
  --fs-body:   1.0625rem;     /* 17px */
  --fs-small:  0.9375rem;     /* 15px */
  --lh-body:   1.55;
  --lh-tight:  1.2;

  /* ---- Space (8pt grid) ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* ---- Shape ---- */
  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-pill: 999px;

  /* ---- Elevation (soft, never harsh) ---- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.10);

  /* ---- Motion (subtle, purposeful) ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.15s;
  --t-med:  0.28s;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* warm dark brown — same hues, muted intensity */
    --bg: #1c1816;        --surface: #28221F;   --surface-2: #322B27;
    --ink: #F0E9E2;       --ink-soft: #A89C92;   --ink-faint: #6E635B;
    --line: #3A322D;
    --primary: #5B9BE8;   --primary-press: #4A90E2;
    --accent: #E8C04A;    --accent-press: #F5C842;
    --warmth: #CF9870;    --calm: #88A87B;       --danger: #E0735C;
    --on-accent: #2C2825;
  }
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

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

/* ---- Layout ---- */
.screen {
  max-width: 480px;          /* phone-first; centers on desktop */
  margin: 0 auto;
  padding: var(--s6) var(--s5);
  padding-bottom: max(var(--s7), env(safe-area-inset-bottom));
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.stack > * + * { margin-top: var(--s4); }
.grow { flex: 1; }
.center { display: flex; align-items: center; justify-content: center; }

/* ---- Type helpers ---- */
.hero  { font-size: var(--fs-hero);  line-height: var(--lh-tight); font-weight: 700; letter-spacing: -0.02em; }
.title { font-size: var(--fs-title); line-height: var(--lh-tight); font-weight: 650; letter-spacing: -0.01em; }
.lead  { font-size: 1.1875rem; color: var(--ink-soft); }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); font-size: var(--fs-small); }

/* ---- Buttons ---- */
.btn {
  appearance: none; border: none;
  font-size: var(--fs-body); font-weight: 600;
  padding: var(--s4) var(--s5);
  border-radius: var(--r-pill);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  width: 100%;
}
.btn:active { transform: scale(0.97); }
.btn--primary   { background: var(--primary); color: var(--on-primary); }   /* main actions */
.btn--primary:active { background: var(--primary-press); }
.btn--accent    { background: var(--accent); color: var(--on-accent); }     /* hear / listen */
.btn--accent:active { background: var(--accent-press); }
.btn--warmth    { background: var(--warmth); color: #fff; }                 /* love / talk-back */
.btn--calm      { background: var(--calm);   color: #fff; }                 /* calm / wellness */
.btn--secondary { background: var(--surface-2); color: var(--ink); }
.btn--ghost     { background: transparent; color: var(--primary); }
.btn[disabled]  { opacity: 0.4; pointer-events: none; }

/* ---- Cards & inputs ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s5);
  box-shadow: var(--shadow-1);
}
.input {
  width: 100%;
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--s4);
  transition: border-color var(--t-fast) var(--ease);
}
.input:focus { border-color: var(--primary); outline: none; }

/* ---- Avatar (pet photo, used everywhere) ---- */
.avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2);
  border: 2px solid var(--surface);
  box-shadow: var(--shadow-2);
}
.avatar--lg { width: 128px; height: 128px; }
.avatar--sm { width: 40px; height: 40px; }

/* ---- The single global Stop button (owned by voice.js) ---- */
#pawsiqStop {
  position: fixed;
  bottom: max(var(--s5), env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%);
  z-index: 9999;
  display: none;                 /* voice.js toggles this */
  align-items: center; gap: var(--s2);
  background: var(--danger); color: #fff;
  border: none; border-radius: var(--r-pill);
  padding: var(--s3) var(--s5);
  font-size: var(--fs-small); font-weight: 600;
  box-shadow: var(--shadow-3);
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
#pawsiqStop.is-visible { display: inline-flex; }
#pawsiqStop:active { transform: translateX(-50%) scale(0.95); }

/* ---- Speaking indicator (subtle, not bouncy) — yellow = listen/hear ---- */
.speaking { display: inline-flex; align-items: center; gap: 3px; height: 16px; }
.speaking span {
  width: 3px; height: 100%; border-radius: 2px; background: var(--accent);
  animation: speak 1s var(--ease) infinite;
}
.speaking span:nth-child(2) { animation-delay: 0.15s; }
.speaking span:nth-child(3) { animation-delay: 0.3s; }
@keyframes speak { 0%,100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }

.fade-in { animation: fadeIn var(--t-med) var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }