/* Design tokens are tracked in /design.md — check there before adding a new
   one, and add it to both places together.

   Current palette is a DARK-MODE PLACEHOLDER — Bo will provide real brand
   tokens later to swap in. Only the values below should need to change. */

:root {
  color-scheme: dark;

  --color-bg: #121212;
  --color-surface: #1e1e1e;
  --color-text: #f2f2f2;
  --color-text-muted: #9a9a9a;
  --color-border: #2e2e2e;

  /* Semantic/status colors — functional feedback, not a branding choice, so
     these stay even though brand accent colors are still deferred. */
  --color-danger: #ff6b6b;
  --color-success: #6bcf7f;

  --font-sans: system-ui, -apple-system, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;

  --radius-sm: 4px;
  --radius-md: 8px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
}

/* --- atoms --- */

.btn {
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}

.btn--primary {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

.btn--tab {
  border: none;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--color-text-muted);
}

.btn--tab.is-active {
  color: var(--color-text);
  border-bottom-color: var(--color-text);
}

.btn--icon {
  padding: var(--space-1);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
}

.btn--icon:hover {
  color: var(--color-danger);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.text-input {
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}

.text-input::placeholder {
  color: var(--color-text-muted);
}

.checkbox {
  accent-color: var(--color-text);
  width: 1.25rem;
  height: 1.25rem;
}

.icon {
  display: inline-flex;
  width: 1em;
  height: 1em;
}

.drag-handle {
  display: inline-flex;
  color: var(--color-text-muted);
  cursor: grab;
  /* iOS Safari: without these, a press-and-hold on the handle starts text
     selection / shows the copy callout instead of (or alongside) our drag. */
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.chevron {
  display: inline-flex;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.chevron--folded {
  transform: rotate(-90deg);
}

/* --- organisms / layout --- */

.tab-bar {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  padding: 0 var(--space-2);
}

.tab-content {
  padding: var(--space-3);
  color: var(--color-text-muted);
}

.app-header {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-2) var(--space-3);
}

/* --- shopping list --- */

.shopping-list {
  display: flex;
  flex-direction: column;
}

.item-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.item-row__name {
  flex: 1;
  cursor: text;
  /* The name is a swipe-to-indent start point too (see shoppingList.js), and
     its pointerdown deliberately isn't preventDefault()'d there so
     tap-to-edit still works — so the callout/selection suppression has to
     live here instead, or a press-then-swipe would open iOS's text-selection
     UI first. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.item-row--done .item-row__name {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

.add-item-row {
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
}

.item-row .text-input,
.add-item-row .text-input {
  flex: 1;
}

.item-row--header .item-row__name {
  font-weight: 600;
}

.item-row--child {
  padding-left: calc(var(--space-4) * 2);
}

.item-row--dragging {
  opacity: 0.6;
  position: relative;
  z-index: 10;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.shopping-list__toolbar {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-2);
}

/* Set on <body> only while a drag is in progress (shoppingList.js) — without
   this, iOS Safari can still pan the whole page or trigger its edge-swipe
   "back" gesture even though touch-action:none is set on the handle itself. */
body.is-dragging {
  touch-action: none;
  overscroll-behavior: none;
}

/* --- pages: login / profile --- */

.login-form,
.profile-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  max-width: 320px;
}

.login-form__heading,
.profile-view__heading {
  margin: 0 0 var(--space-2);
  font-size: 1.25rem;
}

.profile-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.profile-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.profile-form__actions {
  display: flex;
  gap: var(--space-2);
}

.form-error {
  color: var(--color-danger);
  font-size: 0.875rem;
  margin: 0;
}

.form-success {
  color: var(--color-success);
  font-size: 0.875rem;
  margin: 0;
}