/* soussistant design system — ported from Styles/DesignTokens.swift + asset catalog */

:root {
  --background: #FFF4E6;
  --surface: #FFFFFF;
  --surface-secondary: #FFF0C2;
  --text-primary: #2E2E2E;
  --text-secondary: #6E6E6E;
  --border: #E2D6C8;
  --accent-primary: #2FB573;
  --accent-primary-shadow: #1F8F5F;
  --accent-secondary: #F26CA7;
  --accent-tertiary: #E07A2D;
  --success: #1F8F5F;
  --warning: #F4B400;
  --danger: #D93025;

  --space-xxs: 4px;
  --space-xs: 8px;
  --space-s: 12px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 32px;

  --radius-s: 12px;
  --radius-m: 16px;
  --radius-l: 20px;

  --font-rounded: ui-rounded, "SF Pro Rounded", "Nunito", "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-default: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #1E1C1A;
    --surface: #2A2724;
    --surface-secondary: #34302C;
    --text-primary: #F5F1EC;
    --text-secondary: #B8AEA4;
    --border: #403A35;
    --accent-primary: #3ED598;
    --accent-primary-shadow: #2FB573;
    --accent-secondary: #F58BBE;
    --accent-tertiary: #F1994A;
    --success: #2FAE7E;
    --warning: #F6C453;
    --danger: #E35D4F;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--background);
  color: var(--text-primary);
  font-family: var(--font-rounded);
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

#app {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-m) calc(env(safe-area-inset-bottom, 0px) + 120px);
}

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
input { font: inherit; }
a { color: inherit; text-decoration: none; }

/* ---- Typography ---- */
.t-screen-title { font-size: 32px; font-weight: 800; font-family: var(--font-rounded); }
.t-title { font-size: 22px; font-weight: 600; font-family: var(--font-rounded); }
.t-section-label { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.t-body { font-size: 17px; }
.t-callout { font-size: 15px; font-family: var(--font-default); color: var(--text-secondary); }
.t-caption { font-size: 13px; font-weight: 500; font-family: var(--font-default); color: var(--text-secondary); }
.t-mono { font-size: 15px; font-weight: 600; font-family: var(--font-mono); }
.t-danger { color: var(--danger); }

/* ---- Nav bar ---- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 0 10px;
  background: color-mix(in srgb, var(--background) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.navbar .nav-title {
  flex: 1;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  font-family: var(--font-rounded);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-btn {
  min-width: 44px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--accent-primary);
  font-weight: 600;
  border-radius: 10px;
}
.nav-btn:active { opacity: 0.6; }
.nav-btn svg { width: 22px; height: 22px; }
.nav-spacer { min-width: 44px; }

/* ---- Buttons ---- */
.btn-primary {
  display: block;
  width: 100%;
  padding: var(--space-s) var(--space-m);
  background: var(--accent-primary);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  font-family: var(--font-rounded);
  border-radius: var(--radius-m);
  box-shadow: 0 4px 0 var(--accent-primary-shadow);
  transition: transform 0.06s ease, box-shadow 0.06s ease, opacity 0.15s;
}
.btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-primary-shadow); opacity: 0.85; }
.btn-primary:disabled { opacity: 0.45; pointer-events: none; }

.btn-secondary {
  display: block;
  width: 100%;
  padding: var(--space-s) var(--space-m);
  background: var(--surface-secondary);
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 600;
  font-family: var(--font-rounded);
  border-radius: var(--radius-m);
  border: 1px solid var(--border);
}
.btn-secondary:active { opacity: 0.9; }
.btn-secondary:disabled { opacity: 0.45; pointer-events: none; }

.btn-bordered {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
  color: var(--accent-primary);
  font-size: 15px;
  font-weight: 600;
}
.btn-bordered:active { opacity: 0.7; }
.btn-bordered.danger { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.btn-bordered svg { width: 15px; height: 15px; }

.btn-destructive { color: var(--danger); font-weight: 600; width: 100%; padding: var(--space-s); text-align: center; }

/* ---- Cards / lists ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: var(--space-m);
}
.section { margin-top: var(--space-l); }
.section > .t-section-label { margin-bottom: var(--space-xs); padding-left: var(--space-xxs); }

.list-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  overflow: hidden;
}
.list-row {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: 13px var(--space-m);
  width: 100%;
  text-align: left;
}
.list-row + .list-row, .list-row + .row-wrap, .row-wrap + .list-row { border-top: 1px solid var(--border); }
.list-row .chevron { margin-left: auto; color: var(--text-secondary); flex: none; }
.list-row:active { background: color-mix(in srgb, var(--text-primary) 5%, transparent); }

/* ---- Inputs ---- */
.ds-field {
  width: 100%;
  padding: var(--space-s) var(--space-m);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  color: var(--text-primary);
  font-size: 17px;
  outline: none;
}
.ds-field:focus { border-color: var(--accent-primary); }
.ds-field::placeholder { color: var(--text-secondary); opacity: 0.8; }

/* ---- Check rows (steps / ingredients) ---- */
.check-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  padding: 10px var(--space-m);
  width: 100%;
  text-align: left;
}
.check-circle {
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 50%;
  border: 2px solid var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all 0.15s ease;
}
.check-row.checked .check-circle {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #fff;
}
.check-circle svg { width: 14px; height: 14px; }
.check-row.checked .row-text { color: var(--text-secondary); }
.check-row.checked .row-text.strike { text-decoration: line-through; }
.check-row.current { background: color-mix(in srgb, var(--accent-primary) 8%, transparent); }

/* ---- Bottom dock ---- */
.bottom-dock {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-m) var(--space-l);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  z-index: 30;
}
.dock-add {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-primary);
  color: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.dock-add svg { width: 24px; height: 24px; }
.dock-add:active { transform: scale(0.94); }
.dock-list {
  width: 44px;
  height: 44px;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dock-list svg { width: 22px; height: 22px; }
.dock-list:active { opacity: 0.6; }

/* ---- Timer card ---- */
.timer-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: var(--space-m);
}
.timer-card + .timer-card { margin-top: var(--space-s); }
.timer-card .remaining { font-size: 34px; font-weight: 700; font-family: var(--font-mono); letter-spacing: 0.02em; margin: 6px 0 10px; }
.timer-card.completed .remaining { color: var(--accent-primary); }
.timer-card .controls { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.timer-state { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.timer-state.running { color: var(--accent-primary); }

/* ---- Sheets (modal bottom cards) ---- */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fade-in 0.2s ease;
}
.sheet {
  width: 100%;
  max-width: 560px;
  max-height: 92dvh;
  overflow-y: auto;
  background: var(--background);
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  padding: var(--space-s) var(--space-m) calc(env(safe-area-inset-bottom, 0px) + var(--space-l));
  animation: sheet-up 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
.sheet-grabber { width: 40px; height: 5px; border-radius: 3px; background: var(--border); margin: 4px auto 10px; }
@keyframes sheet-up { from { transform: translateY(60%); } to { transform: translateY(0); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- Voice overlay ---- */
.voice-overlay {
  position: fixed;
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.voice-wave-btn {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #fff;
  color: var(--accent-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 10px rgba(0,0,0,0.12);
}
.voice-wave-btn svg { width: 26px; height: 26px; }
.voice-wave-btn:active { transform: scale(0.94); }
.voice-pill {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border-radius: 999px;
  padding: 12px 18px;
  box-shadow: 0 8px 14px rgba(0,0,0,0.14);
}
.voice-pill button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.voice-pill button svg { width: 22px; height: 22px; }
.voice-pill .mic-on { color: #18a34a; }
.voice-pill .mic-off { color: rgba(0,0,0,0.85); }
.voice-pill .end-call { color: #e11d48; }
.voice-status {
  background: rgba(0,0,0,0.5);
  color: rgba(255,255,255,0.9);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono);
  border-radius: 999px;
  padding: 4px 10px;
}

/* ---- Misc ---- */
.spinner {
  width: 22px;
  height: 22px;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

.center-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  text-align: center;
  padding: var(--space-l);
  min-height: 55dvh;
}

.error-banner {
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border));
  color: var(--danger);
  border-radius: var(--radius-m);
  padding: var(--space-s) var(--space-m);
  font-size: 15px;
  margin-top: var(--space-m);
  overflow-wrap: anywhere;
}

.stepper { display: flex; align-items: center; justify-content: space-between; padding: var(--space-s) var(--space-m); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); }
.stepper .step-controls { display: flex; align-items: center; gap: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.stepper .step-controls button { width: 44px; height: 36px; font-size: 20px; font-weight: 600; background: var(--surface-secondary); }
.stepper .step-controls button:first-child { border-right: 1px solid var(--border); }
.stepper .step-controls button:active { opacity: 0.6; }
.stepper .step-value { min-width: 56px; text-align: center; font-family: var(--font-mono); font-weight: 600; }

.img-preview { width: 100%; max-height: 240px; object-fit: contain; border-radius: var(--radius-m); background: var(--surface); }

.badge-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.badge-status.failed { color: var(--danger); }

.fade-in-block { animation: fade-slide 0.35s cubic-bezier(0.34, 1.3, 0.64, 1); }
@keyframes fade-slide { from { opacity: 0; transform: translateY(-14px) scale(0.92); } to { opacity: 1; transform: none; } }

.dialog-box {
  background: var(--surface);
  border-radius: var(--radius-m);
  border: 1px solid var(--border);
  width: min(92vw, 380px);
  padding: var(--space-l) var(--space-m) var(--space-s);
  text-align: center;
}
.dialog-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
  animation: fade-in 0.15s ease;
}
.dialog-box .dialog-actions { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-m); }
.dialog-box .dialog-actions button { padding: 12px; border-radius: 12px; font-weight: 600; background: var(--surface-secondary); border: 1px solid var(--border); }
.dialog-box .dialog-actions button.destructive { color: var(--danger); }
.dialog-box .dialog-actions button.primary { background: var(--accent-primary); color: #fff; border: none; }