/* MatchPoint Kids design system: tokens.
   Source: Joshua's Figma "SEQUENCE" frame (file GzGtyIWBKggoBJ98FKkZSd, node 45:120, 28 Oct 2026).
   The frame is drawn at 1766 px wide; every size here is divided by 4.53 so it fits a 390 pt phone screen.
   Names describe the job a value does, so screens use --mp-tile-bg rather than a hex code. */
:root {
  /* ---------- colour ---------- */
  /* the screen: a deep tennis-night purple, a touch lighter at the top */
  --mp-purple-500: #6A3FFC;
  --mp-purple-600: #5E39F4;
  --mp-screen-bg: linear-gradient(180deg, var(--mp-purple-500), var(--mp-purple-600));

  /* text */
  --mp-ink: #101B40;                         /* text on white tiles */
  --mp-on-purple: #FFFFFF;                   /* headings on the purple screen */
  --mp-on-purple-soft: rgba(255, 255, 255, .5);   /* helper line under a heading */

  /* white answer tiles: near-white face, a pale rim and a grey lip underneath */
  --mp-tile-bg: #FDFBFF;
  --mp-tile-rim: #F1F1F1;
  --mp-tile-lip: #D4D4D4;

  /* a chosen tile (Joshua, 28 Oct: green fill + tick, from the brief): pale green face, bright green rim, deeper green lip */
  --mp-tile-on-bg: #EAFBE6;
  --mp-tile-on-rim: #58DA4A;
  --mp-tile-on-lip: #36B847;

  /* the green "go" button: lit from above, a bright rim, a dark green lip */
  --mp-go-top: #52D753;
  --mp-go-bottom: #0AC955;
  --mp-go-rim: #59F571;
  --mp-go-lip: #019C3F;
  --mp-go-bg: linear-gradient(180deg, var(--mp-go-top), var(--mp-go-bottom));

  /* ticks and done steps */
  --mp-success: #58DA4A;

  /* tennis-ball yellow: the step you're on */
  --mp-ball-top: #DCF927;
  --mp-ball-bottom: #B1EF17;
  --mp-ball: linear-gradient(180deg, var(--mp-ball-top), var(--mp-ball-bottom));

  /* glass on purple: the back button, steps still to come, their joining lines */
  --mp-glass-16: rgba(255, 255, 255, .16);
  --mp-glass-20: rgba(255, 255, 255, .2);
  --mp-glass-30: rgba(255, 255, 255, .3);

  /* ---------- type: Nunito only ---------- */
  --mp-font: 'Nunito', system-ui, -apple-system, sans-serif;
  /* display: the question at the top of a screen */
  --mp-display-size: 37.5px;  --mp-display-line: 36.5px;  --mp-display-weight: 900;  --mp-display-track: -.04em;
  /* helper: the line under the question */
  --mp-helper-size: 17.5px;   --mp-helper-line: 28px;     --mp-helper-weight: 700;
  /* tile label */
  --mp-label-size: 15px;      --mp-label-line: 23px;      --mp-label-weight: 800;    --mp-label-track: -.02em;
  /* button label */
  --mp-button-size: 20.5px;   --mp-button-weight: 900;

  /* ---------- shape ---------- */
  --mp-radius-tile: 18px;
  --mp-radius-button: 22px;
  --mp-rim: 1px;                 /* the thin outline round tiles and the button */
  --mp-lip: 4px;                 /* how far the solid "3D" edge shows under a tile or button */
  --mp-lip-pressed: 1px;         /* pressed in: the lip almost disappears */

  /* ---------- size + spacing ---------- */
  --mp-gutter: 17px;             /* screen edge to tiles */
  --mp-gap-x: 7.5px;             /* between two tiles in a row */
  --mp-gap-y: 11px;              /* between rows of tiles */
  --mp-tile-h: 47px;
  --mp-button-h: 52px;
  --mp-back-size: 40px;
  --mp-tick-size: 18px;

  /* ---------- motion ---------- */
  --mp-press: 90ms ease-out;     /* tiles and buttons sink as they're pressed */
  --mp-pop: cubic-bezier(.3, 1.55, .5, 1);   /* ticks and pictures pop in with a little overshoot */
}