/* badgy — design tokens.
   Palette is taken straight from the logo: near-black wordmark, cream disc,
   sea blue-grey wave. Everything colourful on the site comes from the badge
   artwork itself, so the chrome stays calm — that restraint is what makes the
   store read as trustworthy to a parent rather than as a toy site. */

@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/baloo2-600-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/baloo2-800-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700-latin.woff2') format('woff2');
}

:root {
  /* brand */
  --ink: #141414;
  --ink-soft: #3d3d3d;
  --ink-mute: #6c6a66;
  --cream: #f5efe0;
  --cream-deep: #ebe2ce;
  --paper: #fffdf8;
  --sea: #8aa9b4;
  --sea-deep: #5f8896;
  --sea-ink: #2f4a54;
  /* Accent lifted from the badge artwork, not from the logo — the logo triad has
     no warm colour and the header needed one thing that pops. */
  --sun: #ffd23f;
  --sun-deep: #f0bd1c;

  /* semantic */
  --accent: var(--sea-deep);
  --ok: #2f7d51;
  --warn: #b3701a;
  --bad: #a4302c;
  --line: #ddd4c2;
  --line-soft: #ebe3d4;

  /* type */
  --font-display: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --font-text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-hero: clamp(2.4rem, 4.6vw, 3.9rem);
  --t-h1: clamp(2rem, 4.4vw, 3.2rem);
  --t-h2: clamp(1.5rem, 2.8vw, 2.15rem);
  --t-h3: 1.2rem;
  --t-body: 1rem;
  --t-sm: 0.875rem;
  --t-xs: 0.78rem;

  /* space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 7rem;

  --wrap: 1180px;
  --wrap-narrow: 760px;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20, 20, 20, .06), 0 2px 8px rgba(20, 20, 20, .05);
  --shadow-md: 0 2px 6px rgba(20, 20, 20, .07), 0 12px 28px rgba(20, 20, 20, .08);
  --shadow-lg: 0 6px 16px rgba(20, 20, 20, .08), 0 28px 60px rgba(20, 20, 20, .12);

  /* motion — the velcro timings live in velcro.css, these are for UI chrome */
  --ease-out: cubic-bezier(.22, .68, .28, 1);
  --ease-in-out: cubic-bezier(.5, .05, .3, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;

  --header-h: 68px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
  }
}