/* Colorcheer design tokens v0.1 — 4px grid. Generated from tokens.json. */

:root {
  /* Color — ink */
  --ink-900: #1E1B18;
  --ink-700: #3D3830;
  --ink-500: #5A5248;
  --ink-300: #A89F90; /* lines only, never text */

  /* Color — paper */
  --paper-0: #FFFDF8;
  --paper-50: #FBF6EC;
  --paper-100: #F4EDDF;
  --paper-200: #EDE4D2;

  /* Color — purple (CTA only) */
  --purple-600: #6B4FD8;
  --purple-700: #5236C0;
  --purple-100: #ECE7FC;

  /* Color — crayon (fills and doodles, never text) */
  --crayon-yellow: #F7C531;
  --crayon-pink: #F48FB8;
  --crayon-blue: #3A8FE0;
  --crayon-green: #3DBE5A;
  --crayon-red: #E8452C;
  --crayon-orange: #F68A2E;

  /* Fonts */
  --font-display: 'Fredoka', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;

  /* Type scale: size / line-height */
  --type-display-size: 72px;  --type-display-lh: 76px;  --type-display-ls: -1.44px;
  --type-h2-size: 48px;       --type-h2-lh: 56px;
  --type-h3-size: 32px;       --type-h3-lh: 40px;
  --type-h4-size: 24px;       --type-h4-lh: 32px;
  --type-timer-size: 48px;    --type-timer-lh: 48px;
  --type-lead-size: 20px;     --type-lead-lh: 32px;
  --type-body-size: 16px;     --type-body-lh: 24px;
  --type-label-size: 12px;    --type-label-lh: 16px;  --type-label-ls: 0.96px;
  --type-caption-size: 12px;  --type-caption-lh: 16px;

  /* Space (4px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --border: 2px solid var(--ink-900);
  --border-dashed: 2px dashed var(--ink-300);
  --shadow-sm: 4px 4px 0 var(--ink-900);
  --shadow-lg: 8px 8px 0 var(--ink-900);

  /* Component sizes */
  --size-button: 56px;
  --size-button-sm: 48px;
  --size-input: 56px;
  --size-chip: 40px;
  --size-timer-tile: 96px;
  --size-step-badge: 56px;

  /* Layout */
  --container-max: 1200px;
  --gutter: 24px;
  --section-pad-y: 96px;
}

@media (max-width: 720px) {
  :root {
    --type-display-size: 48px; --type-display-lh: 56px; --type-display-ls: -0.96px;
    --type-h2-size: 36px;      --type-h2-lh: 44px;
    --section-pad-y: 64px;
  }
}