/* Generated by scripts/sync-brand.mjs from brand/tokens/tokens.css and brand/web/brand.css. Do not edit. */
/* Fredoka (display) and Nunito (body), self-hosted: variable fonts, Latin only. SIL Open Font Licence: see fonts/. */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('./fonts/fredoka-latin-wght-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('./fonts/nunito-latin-wght-normal.woff2') format('woff2');
}

/* Plomby Games design tokens. Generated from tokens.json: edit that file, then regenerate. */
:root {
  /* Colour */
  --sand: #f6e8cf;  /* Main background for every screen and the logo ground. */
  --sand-deep: #ebd6b0;  /* Circles and panels behind the mascot, quiet secondary surfaces. */
  --moss: #7fa05a;  /* Primary brand colour: tunic, large panels, progress and success areas. */
  --moss-light: #96b572;  /* Lighter leaf and highlight shade. */
  --moss-dark: #5f7e3e;  /* Shading on moss shapes and leaf veins. */
  --terracotta: #d9774b;  /* Buttons and calls to action. */
  --terracotta-dark: #b8552b;  /* The word GAMES and other large display text on sand (about 4:1, so 24px and above only), and pressed button edges. */
  --mustard: #edb93c;  /* Rewards: stars, stickers, the tunic button, highlights. */
  --plum: #9a6c8f;  /* Plomby's skin: the mascot only. */
  --plum-tint: #d1adc6;  /* Inner ears and soft mascot highlights. */
  --plum-deep: #5e3650;  /* The wordmark 'Plomby' and strong accents. */
  --duck-egg: #8cc5c0;  /* Cool relief colour: app icon ground, secondary panels, calm game backgrounds. */
  --acorn: #8a5a32;  /* The acorn cap on Plomby's head and other wood or earth shapes. */
  --acorn-dark: #6e4524;  /* Texture dots on the acorn cap. */
  --blush: #e89a7a;  /* Plomby's tongue only. */
  --bark: #3e2c23;  /* Text, outlines on the mascot and illustrations. */
  --bark-soft: #5a4538;  /* Secondary and caption text for parents. */
  --white: #ffffff;  /* Plomby's eyes and clean highlights. */
  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --tap-min: 64px;
  --tap-gap: 16px;
  /* Radius */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-round: 999px;
  /* Shadow */
  --shadow-chunky: 0 6px 0 #b8552b;
  --shadow-soft: 0 6px 0 #ebd6b0;
  /* Type families (load Fredoka and Nunito from Google Fonts) */
  --font-display: "Fredoka", "Baloo 2", "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Type styles */
.wordmark { font-family: var(--font-display); font-size: 104px; line-height: 1; font-weight: 700; letter-spacing: -0.01em; }
.wordmark-sub { font-family: var(--font-display); font-size: 32px; line-height: 1.2; font-weight: 700; letter-spacing: 0.36em; }
.title { font-family: var(--font-display); font-size: 48px; line-height: 1.1; font-weight: 600; }
.heading { font-family: var(--font-display); font-size: 32px; line-height: 1.15; font-weight: 600; }
.button { font-family: var(--font-display); font-size: 28px; line-height: 1.1; font-weight: 600; }
.body { font-family: var(--font-body); font-size: 18px; line-height: 26px; font-weight: 400; }
.body-strong { font-family: var(--font-body); font-size: 18px; line-height: 26px; font-weight: 700; }
.caption { font-family: var(--font-body); font-size: 14px; line-height: 20px; font-weight: 400; }

/* Plomby the mascot: size the box with width or height. Add "live" for the idle movement (slow breathing, a blink and a
   small ear wiggle) and "hop" for a bounce. All movement stops for anyone who asks their device for less. */
.pl-mascot { display: inline-block; flex: none; line-height: 0; }
.pl-mascot > svg { display: block; width: 100%; height: auto; }
/* The ear and eye groups only get a transform box while they move: the cheering pose's ears already carry their own rotation. */

@media (prefers-reduced-motion: no-preference) {
  .pl-mascot.live > svg { transform-origin: 50% 100%; animation: pl-breathe 4.2s ease-in-out infinite; }
  .pl-mascot.live .pl-ear, .pl-mascot.live .pl-eyes { transform-box: fill-box; }
  .pl-mascot.live .pl-ear-l { transform-origin: 100% 55%; }
  .pl-mascot.live .pl-ear-r { transform-origin: 0% 55%; }
  .pl-mascot.live .pl-eyes { transform-origin: center; }
  .pl-mascot.live .pl-eyes { animation: pl-blink 6s ease-in-out infinite; }
  .pl-mascot.live .pl-ear-l { animation: pl-wiggle-l 7s ease-in-out infinite; }
  .pl-mascot.live .pl-ear-r { animation: pl-wiggle-r 7s ease-in-out 1.2s infinite; }
  .pl-mascot.hop > svg { transform-origin: 50% 100%; animation: pl-hop 0.9s ease-in-out infinite; }
  .pl-mascot.pop > svg { transform-origin: 50% 100%; animation: pl-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
}
@keyframes pl-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.02, 1.035); } }
@keyframes pl-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.12); } }
@keyframes pl-wiggle-l { 0%, 88%, 100% { transform: rotate(0); } 92% { transform: rotate(-7deg); } 96% { transform: rotate(3deg); } }
@keyframes pl-wiggle-r { 0%, 88%, 100% { transform: rotate(0); } 92% { transform: rotate(7deg); } 96% { transform: rotate(-3deg); } }
@keyframes pl-hop { 0%, 100% { transform: translateY(0) scale(1.03, 0.96); } 40% { transform: translateY(-8%) scale(0.98, 1.04); } 70% { transform: translateY(0) scale(1.03, 0.96); } }
@keyframes pl-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.pl-star { display: inline-block; flex: none; line-height: 0; }
.pl-star > svg { display: block; width: 100%; height: auto; overflow: visible; }