/* Jumbo Bricks — shared toybox theme.
   Loud, tactile, chunky: candy-pink brick, cobalt, sunflower yellow, ink
   outlines and hard "sticker" shadows. Everything is rounded like a moulded
   toy. The stud (a fat circle) is the repeating motif across the brand. */

:root {
  /* colour — anchored on the real pink brick */
  --pink: #ff4d87;
  --pink-ink: #c4145a;
  --pink-soft: #ffd9e5;
  --pink-tint: #fff1f6;
  --blue: #2b52ff;
  --blue-ink: #1a34b8;
  --blue-soft: #d9dfff;
  --yellow: #ffc21c;
  --yellow-ink: #a9770a;
  --green: #12c078;
  --green-ink: #0a8a56;

  --ink: #181321;          /* warm near-black type + outlines */
  --ink-soft: #6d6577;
  --paper: #fff6ec;        /* warm off-white ground */
  --paper-2: #ffeddd;
  --card: #ffffff;
  --line: #ece0cf;

  --radius: 18px;
  --radius-sm: 12px;
  --pill: 999px;

  /* the sticker shadow: a hard, un-blurred offset in ink */
  --pop: 4px 4px 0 var(--ink);
  --pop-sm: 3px 3px 0 var(--ink);
  --pop-lg: 7px 7px 0 var(--ink);

  --display: "Arial Rounded MT Bold", "Baloo 2", Nunito, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .display { font-family: var(--display); font-weight: 800; }

button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 5px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}