/* ── TOKENS ──────────────────────────────────────────────────────
   v2 cream palette (confirmed May 27, 2026). Solid surfaces only —
   glassmorphism removed per studio standards (vibe-code-rules §8). */
:root {
  --bg:           #f2f1ed;
  --surface:      #ffffff;
  --surface-2:    #f7f6f2;
  --border:       #e2e1dc;
  --border-light: #d4d3ce;
  --text:         #1a1a18;
  --text-muted:   #6e6e66;
  --text-dim:     #767569; /* ≥4.5:1 on white surfaces; use --text-muted on the cream page bg */
  --accent:       #ffb61a;
  --accent-hover: #e8a310;
  --accent-dim:   rgba(255, 182, 26, 0.14);
  --accent-line:  rgba(255, 182, 26, 0.45);
  --success:      #3a9e6a;
  --error:        #cc3333;
  --error-dim:    rgba(204, 51, 51, 0.12);
  --shadow:       0 2px 12px rgba(26, 26, 24, 0.07);
  --font:         'Avenir Next', 'Avenir', 'Helvetica Neue', Arial, sans-serif;
  --sp-xs: 4px;  --sp-sm: 8px;  --sp-md: 16px;
  --sp-lg: 24px; --sp-xl: 40px; --sp-2xl: 64px;
  --radius: 4px;
  --radius-lg: 8px;
  --transition: 0.18s ease;
}

/* ── RESET ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button {
  font-family: var(--font);
  cursor: pointer;
  border: none;
  background: none;
}
input, select {
  font-family: var(--font);
  color: var(--text);
}

/* ── HEADER ──────────────────────────────────────────────────── */
.header {
  border-bottom: 1px solid var(--border);
  padding: 0 var(--sp-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 100;
}
.header-logo-btn { cursor: pointer; display: flex; align-items: center; }
.header-logo-img {
  height: 64px;
  width: auto;
  filter: brightness(0) opacity(0.85);
}
.header-meta {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 400;
}

/* ── LOADING / ERROR STATES ──────────────────────────────────── */
.state-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: var(--sp-md);
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: 0.08em;
}
.state-screen.hidden { display: none; }
.spinner {
  width: 24px; height: 24px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.error-hint { color: var(--text-muted); font-size: 11px; }

/* ── VIEWS ───────────────────────────────────────────────────── */
.view { display: none; }
.view.active { display: block; }

/* ── FOCUS STATES ────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.qty-input:focus-visible,
.placement-select:focus-visible,
.color-select:focus-visible { outline: none; border-color: var(--accent); }

/* ── REDUCED MOTION ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── TOUCH TARGETS (44px minimum on touch devices) ───────────── */
@media (pointer: coarse) {
  .filter-btn,
  .qty-preset-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .placement-select,
  .color-select { min-height: 44px; }
  /* Keep the 16px info dot visually small, expand its tap area to 44px. */
  .loc-info-btn { position: relative; }
  .loc-info-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
  }
}

/* ── RESPONSIVE (shared) ─────────────────────────────────────── */
@media (max-width: 900px) {
  .header { padding: 0 var(--sp-lg); }
}
@media (max-width: 480px) {
  .header-meta { display: none; }
}