@layer tokens {
  @font-face {
    font-family: "Fredoka";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("/assets/fredoka-normal-16fa5165.woff2") format("woff2");
  }
  @font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url("/assets/nunito-normal-ae690aad.woff2") format("woff2");
  }
  @font-face {
    font-family: "Nunito";
    font-style: italic;
    font-weight: 200 1000;
    font-display: swap;
    src: url("/assets/nunito-italic-a612d1e0.woff2") format("woff2");
  }

  :root {
    /* Toy city palette: molded plastic, hard shadows, sunny sky. */
    --sky: #c9e8ff;
    --sky-deep: #8fcbff;
    --board: #f6e7c8;
    --board-edge: #d9b98a;
    --ink: #1e2a44;
    --ink-soft: #4a5677;
    --ink-faint: #8a93ad;
    --paper: #fffdf7;
    --paper-shade: #f1ead8;
    --brick: #ff6b4a;
    --brick-deep: #d94e31;
    --sun: #ffd23f;
    --sun-deep: #e0aa00;
    --lawn: #67c463;
    --lawn-deep: #3e9e3b;
    --pool: #4fb6e8;
    --danger: #e0333c;

    --font-display: "Fredoka", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
    --font-body: "Nunito", "Segoe UI", "Helvetica Neue", sans-serif;

    --step--1: 0.875rem;
    --step-0: 1rem;
    --step-1: 1.2rem;
    --step-2: 1.5rem;
    --step-3: 1.95rem;
    --step-4: 2.6rem;
    --step-5: 3.4rem;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    --radius-sm: 6px;
    --radius: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    --shadow-block: 4px 4px 0 var(--ink);
    --shadow-block-sm: 2px 2px 0 var(--ink);
    --shadow-lift: 0 12px 24px -12px rgb(30 42 68 / 0.35);

    --t-fast: 120ms;
    --t-ui: 220ms;
    --t-camera: 450ms;
    --step-ms: 200ms;

    --ease-pop: cubic-bezier(0.2, 1.4, 0.4, 1);
    --ease-glide: cubic-bezier(0.22, 0.61, 0.36, 1);

    --measure: 62ch;
  }

  @property --pan-x { syntax: "<length>"; inherits: false; initial-value: 0px; }
  @property --pan-y { syntax: "<length>"; inherits: false; initial-value: 0px; }
  @property --zoom { syntax: "<number>"; inherits: false; initial-value: 1; }
  @property --progress { syntax: "<number>"; inherits: false; initial-value: 1; }
}