{
  "$description": "Design tokens of PocoPoco. The same values as tokens.css; change both together.",
  "color": {
    "primary": { "$type": "color", "$value": "#d7261e", "$description": "Chilli red: Poco, primary buttons, logo" },
    "on-primary": { "$type": "color", "$value": "#ffffff" },
    "primary-edge": { "$type": "color", "$value": "#a3160f", "$description": "Button 3D edge, Poco's arms" },
    "secondary": { "$type": "color", "$value": "#f6b92b", "$description": "Saffron: logo, icon, Home, celebration screens" },
    "on-secondary": { "$type": "color", "$value": "#2b1a17" },
    "accent": { "$type": "color", "$value": "#ff7a1a", "$description": "Flame orange: loco mode, streaks, daily goal" },
    "loco": { "$type": "color", "$value": "#e8481c", "$description": "Poco's body in loco mode" },
    "background": { "$type": "color", "$value": "#fff0c2", "$description": "Light yellow: learning screens (Situations, Practice, Progress)" },
    "celebration": { "$type": "color", "$value": "#f6b92b", "$description": "Saffron screens: splash, Home, finished situation, record" },
    "surface": { "$type": "color", "$value": "#ffffff", "$description": "Cards" },
    "edge": { "$type": "color", "$value": "#f1dfa8", "$description": "Card edge on light yellow" },
    "edge-celebration": { "$type": "color", "$value": "#d99a12", "$description": "Card edge on saffron" },
    "neutral": { "$type": "color", "$value": "#e9e2d2", "$description": "Empty bars, wrong answer, locked items" },
    "text": { "$type": "color", "$value": "#2b1a17" },
    "muted": { "$type": "color", "$value": "#7a5f57" },
    "success": { "$type": "color", "$value": "#3e8e41", "$description": "Correct answer, known words" },
    "success-soft": { "$type": "color", "$value": "#ddf0d8" },
    "on-success-soft": { "$type": "color", "$value": "#1e5221" },
    "warning": { "$type": "color", "$value": "#ff7a1a" },
    "error": { "$type": "color", "$value": "#a3160f", "$description": "Form validation only. A wrong answer is neutral grey, never red." },
    "info": { "$type": "color", "$value": "#5a2e22" }
  },
  "font": {
    "heading": { "$type": "fontFamily", "$value": ["Baloo 2", "Trebuchet MS", "system-ui", "sans-serif"] },
    "body": { "$type": "fontFamily", "$value": ["Nunito", "Segoe UI", "system-ui", "sans-serif"] }
  },
  "font-weight": {
    "heading": { "$type": "fontWeight", "$value": 800 },
    "body": { "$type": "fontWeight", "$value": 600 },
    "body-strong": { "$type": "fontWeight", "$value": 700 }
  },
  "text": {
    "h1": { "$type": "dimension", "$value": "2.5rem" },
    "h2": { "$type": "dimension", "$value": "1.75rem" },
    "h3": { "$type": "dimension", "$value": "1.25rem" },
    "body": { "$type": "dimension", "$value": "1.0625rem" },
    "small": { "$type": "dimension", "$value": "0.875rem" }
  },
  "app-text": {
    "$description": "Mobile app scale in logical pixels (Flutter theme).",
    "number": { "$type": "dimension", "$value": "56px" },
    "screen-title": { "$type": "dimension", "$value": "28px" },
    "question": { "$type": "dimension", "$value": "25px" },
    "card-title": { "$type": "dimension", "$value": "20px" },
    "button": { "$type": "dimension", "$value": "19px" },
    "answer": { "$type": "dimension", "$value": "17px" },
    "body": { "$type": "dimension", "$value": "15px" },
    "caption": { "$type": "dimension", "$value": "14px" },
    "nav-label": { "$type": "dimension", "$value": "11px" }
  },
  "space": {
    "1": { "$type": "dimension", "$value": "4px" },
    "2": { "$type": "dimension", "$value": "8px" },
    "3": { "$type": "dimension", "$value": "16px" },
    "4": { "$type": "dimension", "$value": "24px" },
    "5": { "$type": "dimension", "$value": "40px" }
  },
  "radius": {
    "sm": { "$type": "dimension", "$value": "8px" },
    "md": { "$type": "dimension", "$value": "16px", "$description": "Buttons, answer options" },
    "lg": { "$type": "dimension", "$value": "22px", "$description": "Cards" },
    "pill": { "$type": "dimension", "$value": "999px" }
  },
  "edge": {
    "card": { "$type": "dimension", "$value": "3px", "$description": "Solid bottom edge in the edge colour, no blur" },
    "button": { "$type": "dimension", "$value": "4px", "$description": "Button edge in primary-edge; 0 when pressed" }
  }
}