/* ==========================================================================
   Best Friend App — site styles
   Design system: "Best Friend in the Box" (audience: tweens 9–12)
   Reference: .claude/notes/design-system.md · source in .claude/notes/sources/

   THEMING MODEL: one favorite color (--bs-primary) is the only knob. Every
   --bf-* token is DERIVED from it with color-mix(), so changing --bs-primary
   re-themes the whole app (see the wizard's color step for the live preview).
   ========================================================================== */

:root {
  /* --- The one knob: favorite color (default "Grape") --- */
  --bs-primary: #7C5CFF;
  --bs-primary-rgb: 124, 92, 255;

  /* --- Derived brand tokens (mirror derive() in the design source) --- */
  --bf-soft:   color-mix(in srgb, var(--bs-primary) 16%, #fff);    /* chips, soft fills   */
  --bf-softer: color-mix(in srgb, var(--bs-primary)  8%, #fff);    /* faint backgrounds   */
  --bf-strong: color-mix(in srgb, var(--bs-primary) 70%, #2a1a4a); /* hover / active      */
  --bf-ring:   color-mix(in srgb, var(--bs-primary) 65%, #fff);
  --bf-ink:    color-mix(in srgb, var(--bs-primary) 34%, #211433); /* headings            */
  --bf-on:     #fff;      /* text on primary (grape is dark; light picks want JS contrast) */

  /* --- Shape: rounder than stock Bootstrap --- */
  --bs-border-radius:    .9rem;
  --bs-border-radius-sm: .6rem;
  --bs-border-radius-lg: 1.4rem;
}

/* --- Typography: Baloo 2 (display) + Nunito (body) --- */
body {
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #2a2140;
  min-height: 100vh;
  background:
    radial-gradient(1100px 560px at 50% -12%, var(--bf-softer), transparent),
    #f4f2f8;
}
h1, h2, h3, h4, h5, h6, .navbar-brand {
  font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  font-weight: 800;
}
h1, h2, h3 { color: var(--bf-ink); }

/* --- Components: rounded + playful --- */
.card {
  border: none;
  border-radius: 1.4rem;
  box-shadow: 0 22px 55px -34px rgba(60, 40, 120, .55);
}
.btn { border-radius: 999px; font-family: 'Baloo 2', 'Nunito', sans-serif; font-weight: 800; }
.badge { border-radius: 999px; }

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-color: var(--bf-on);
  --bs-btn-hover-bg: var(--bf-strong);
  --bs-btn-hover-border-color: var(--bf-strong);
  --bs-btn-active-bg: var(--bf-strong);
  --bs-btn-active-border-color: var(--bf-strong);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  box-shadow: 0 10px 22px -10px var(--bs-primary);
}

/* --- Mascot (the BFF-Bot) — an inline SVG drawn once in
   templates/partials/bot.html; these classes float it and blink its eyes.
   transform-box: fill-box makes CSS transforms act on each SVG element's own
   box (otherwise they'd pivot around the SVG's corner — broken blinks!), and
   the translate/rotate use viewBox units, so the motion scales with size. --- */
.bf-bot { flex: 0 0 auto; overflow: visible; }
.bf-bot-animate .bf-bot-float {
  animation: bf-floaty 5s ease-in-out infinite;
  transform-box: fill-box; transform-origin: center;
}
.bf-bot-animate .bf-bot-eye {
  animation: bf-blink 5s infinite;
  transform-box: fill-box; transform-origin: center;
}

/* --- Color swatch buttons (live-theming demo) --- */
.bf-swatch {
  width: 40px; height: 40px; border-radius: 12px; border: none; cursor: pointer;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .12); transition: transform .12s ease;
}
.bf-swatch:hover { transform: translateY(-2px); }

@keyframes bf-floaty { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-5px) rotate(1deg); } }
@keyframes bf-blink  { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }

/* --- Django auth form inputs styled like Bootstrap controls (no crispy-forms dep) --- */
form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]),
form select, form textarea {
  display: block; width: 100%; padding: .6rem .85rem;
  font-size: 1rem; line-height: 1.5; color: #2a2140;
  background-color: #fff; border: 2px solid #efebf6;
  border-radius: var(--bs-border-radius);
}
form input:focus, form select:focus, form textarea:focus {
  outline: 0; border-color: var(--bs-primary);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

/* ==========================================================================
   Setup wizard ("Meet your BFF-Bot")
   ========================================================================== */

/* Alpine: hide x-cloak'd elements until Alpine wakes up */
[x-cloak] { display: none !important; }

/* --- Caterpillar progress: dots fill as you go; the current one stretches --- */
.bf-step-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 999px;
  background: var(--bf-soft);
  transition: width .25s ease, background .2s ease;
}
.bf-step-dot.is-done { background: var(--bs-primary); }
.bf-step-dot.is-now  { width: 28px; background: var(--bs-primary); }

/* --- Pick-me chips (Bootstrap btn-check + label) --- */
.bf-chip {
  --bs-btn-bg: var(--bf-soft);
  --bs-btn-color: var(--bf-ink);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 28%, #fff);
  --bs-btn-hover-color: var(--bf-ink);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-color: var(--bf-on);
  --bs-btn-active-border-color: var(--bs-primary);
  transition: transform .12s ease;
}
.bf-chip:hover { transform: translateY(-2px); }
.btn-check:checked + .bf-chip { box-shadow: 0 10px 22px -10px var(--bs-primary); }

/* --- Selected color swatch --- */
.bf-swatch-active { outline: 3px solid var(--bf-ring); outline-offset: 2px; transform: scale(1.08); }
.bf-swatch-active:hover { transform: scale(1.08); }

/* --- Bot-builder pick buttons: a mini bot per shape/hat choice --- */
.bf-bot-pick {
  border: none; background: var(--bf-softer); cursor: pointer;
  border-radius: 12px; padding: 4px; line-height: 0;
  transition: transform .12s ease;
}
.bf-bot-pick:hover { transform: translateY(-2px); }

/* The native color input, sized like a swatch (overrides the 100%-width form rule) */
form input[type=color] {
  width: 72px; height: 48px; padding: .3rem; display: inline-block;
  border-radius: 12px; cursor: pointer;
}

/* --- Autocomplete results: big tappable rows, inline (no floating dropdown) --- */
.bf-results { display: grid; gap: .4rem; }
.bf-result {
  text-align: left; border: 2px solid #efebf6; background: #fff;
  border-radius: var(--bs-border-radius); padding: .5rem .85rem;
  font-weight: 700; color: #2a2140; cursor: pointer;
}
.bf-result:hover { border-color: var(--bs-primary); background: var(--bf-softer); }

/* --- A search-added pick, shown as a removable chip --- */
.bf-pick {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--bs-primary); color: var(--bf-on);
  border-radius: 999px; padding: .35rem .9rem;
  font-family: 'Baloo 2', 'Nunito', sans-serif; font-weight: 800;
}
.bf-pick button {
  border: none; background: transparent; color: inherit;
  font-weight: 800; line-height: 1; padding: 0; cursor: pointer;
}