/* Beachy Lila — site-wide styles.
 *
 * Tokens live in `colors_and_type.css` (imported from index.html); this
 * file owns the things that don't fit cleanly into CSS variables:
 *
 *   - global resets (margins, scrollbars, focus rings)
 *   - keyframes (drifting orbs, toast slide-in, spinner, page fade)
 *   - tap / hover / press feedback so every interactive surface feels
 *     responsive *before* React state flips and re-renders
 *
 * Why a separate file from the tokens: tokens are pure data and never
 * change at runtime — keeping them isolated means we can ship the
 * design system as a copy-paste asset without dragging the codebase's
 * idiomatic overrides along with it.
 */

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

input::placeholder, textarea::placeholder { color: var(--fg-4); }

/* No visible scrollbars; the design uses the foam-on-dusk wash as a
 * visual signal that more content lives below, plus the scroll wheel /
 * touch swipe always works. */
::-webkit-scrollbar { width: 0; height: 0; }

#root { width: 100%; min-height: 100%; }

/* ─── Drifting orbs ───────────────────────────────────────────────
 * Three blurred coloured circles that slowly drift in the background.
 * Lila top-left, coral bottom-right, aqua mid. Each runs on its own
 * timeline so they never line up — gives the feeling of a slow,
 * unhurried sunset behind frosted glass.
 */
@keyframes apBlobA {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(15%, 12%) scale(1.15); }
}
@keyframes apBlobB {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-12%, -8%) scale(1.18); }
}
@keyframes apBlobC {
  0%   { transform: translate(0, 0) scale(0.95); }
  100% { transform: translate(-8%, 14%) scale(1.1); }
}

/* Toasts slide in from the right with a hint of spring. Anything
 * urgent the user needs to see (errors, vote confirmations) is wired
 * through the ToastContainer in toast.jsx. */
@keyframes toastIn {
  from { transform: translate(20px, 0); opacity: 0; }
  to   { transform: translate(0, 0);    opacity: 1; }
}

/* Page-level transition — fade + 12px upward translate. Triggered by
 * applying `.page-anim` with a fresh React key on route change. */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-anim { animation: pageIn 240ms var(--ease-out); }

@keyframes spin { to { transform: rotate(360deg); } }

/* Click feedback for every button. Pure CSS so it fires the moment
 * the pointer goes down — no waiting for React state to flip and
 * re-render. The Babel-in-browser pipeline adds 50-100ms to every
 * state-driven repaint, which is enough to make a "save" click feel
 * sluggish before this rule.
 *
 * Hover transition is on `filter` instead of `background` so we don't
 * fight inline styles that set their own background. Duration stays
 * tight — anything over ~100ms feels mushy on a desktop pointer. */
button {
  transition: transform 80ms var(--ease-out), filter 100ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
button:not(:disabled):hover  { filter: brightness(1.06); }
button:not(:disabled):active { transform: scale(0.97); filter: brightness(0.92); transition-duration: 40ms; }

/* Same treatment for elements that act like buttons (label-as-file
 * picker, kebab triggers, anchors styled as CTAs). */
[role="button"], a.button, label[for], label.button {
  transition: transform 80ms var(--ease-out), filter 100ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
[role="button"]:active, a.button:active, label[for]:active, label.button:active {
  transform: scale(0.97); filter: brightness(0.92); transition-duration: 40ms;
}

/* Native <input type=range> styling — used by the volume slider in the
 * old codebase. New code routes volume through the Slider primitive,
 * but a few places (image-cropper zoom, edit-track sliders) still hit
 * the raw element. Match the Beachy-Lila lila track + foam thumb. */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 2px;
  background: rgba(196,154,255,0.16);
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--lila-400); cursor: pointer;
  box-shadow: 0 2px 8px rgba(169,114,244,0.5);
}
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; border: none;
  background: var(--lila-400); cursor: pointer;
  box-shadow: 0 2px 8px rgba(169,114,244,0.5);
}

/* Selection / focus rings — coral so they read as "warm interactive"
 * rather than browser-default-blue. Most form controls override their
 * own focus state, this is the fallback. */
::selection {
  background: rgba(255,126,139,0.35);
  color: var(--foam);
}