/* Llama Party — the phone's design tokens. The colours the big screen shows too
   (--ink, --cream, --gold, --glass, …) come from lp_protocol::palette: the
   controller sets them on the root as it starts, so they can't drift from
   the big screen's. This file holds what only the page needs: aliases, type,
   radii, shadows and motion. Fonts load from fonts.css (no network). */
:root {
  /* Helper copy is sand; --label (a light coral) is for caps labels. */
  --text-dim: var(--sand);

  /* Glass's blur, over the world as on the big screen. */
  --glass-blur: blur(22px) saturate(1.1) brightness(0.8);
  --text-on-action: var(--ink);

  /* The main action is gold, as on the big screen. */
  --action: var(--gold);
  --action-hover: var(--gold-hover);
  --action-press: var(--gold-press);

  /* Cream is where you are (as on the big screen); never a gold ring. */
  --focus-ring: var(--cream);

  /* ---- Typography ---- */
  --font-display: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, sans-serif;

  --w-medium: 600;
  --w-bold: 700;
  --w-heavy: 800;
  --w-black: 900;

  --ls-caps: 0.08em;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* ---- Effects (Sleek direction: flat fills, soft colored shadows) ---- */
  --shadow-sm: 0 2px 6px rgba(8, 9, 12, 0.22);
  --shadow-md: 0 6px 16px rgba(8, 9, 12, 0.28);
  --shadow-float: 0 12px 28px rgba(8, 9, 12, 0.32);
  --shadow-pop: 0 24px 60px rgba(8, 9, 12, 0.5);

  --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.22);

  /* Selection is motion-free: an offset ring, no scale-up. */
  --ring-focus:
    0 0 0 3px var(--surface), 0 0 0 7px var(--focus-ring),
    0 10px 24px rgba(8, 9, 12, 0.42);

  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 90ms;
  --dur-med: 160ms;
}

/* Reduced-flash accessibility mode (Settings → Accessibility). Party UIs
   flash a lot; this flattens celebratory animation to gentle fades. Each
   animation plays its one instant iteration and rests on the element's own
   style: a looping one repeated every millisecond would show a random frame
   each refresh, a strobe. */
:root[data-reduced-flash="1"] * {
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.06s !important;
}