/* Design tokens, PRD section 6. Only #CB2127, #FFF5F6, black, and tints of #CB2127. */
:root {
  --brand: #cb2127;
  --surface: #fff5f6;
  --ink: #000000;
  --on-brand: #ffffff; /* approved exception: text on full red only */
  --card: #ffffff; /* result card background for every level (owner revision, 30 Oct 2026) */

  --brand-tint-10: rgb(203 33 39 / 0.1);
  --brand-tint-20: rgb(203 33 39 / 0.2);
  --brand-tint-30: rgb(203 33 39 / 0.3);
  --brand-tint-40: rgb(203 33 39 / 0.4);
  --brand-tint-50: rgb(203 33 39 / 0.5);
  --brand-tint-60: rgb(203 33 39 / 0.6);
  --brand-tint-70: rgb(203 33 39 / 0.7);
  --brand-tint-80: rgb(203 33 39 / 0.8);
  --brand-tint-90: rgb(203 33 39 / 0.9);
  --brand-tint-100: rgb(203 33 39 / 1);

  /* Card background per level, PRD section 2 (pale to full red) */
  --level-1: #fff5f6;
  --level-2: #f2c8c9;
  --level-3: #e89b9e;
  --level-4: #db6468;
  --level-5: #cb2127;

  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-jp: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --font-body: var(--font-sans), var(--font-jp);

  --text-xs: 12px; /* floor: nothing smaller */
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 28px;
  --text-2xl: 34px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;

  --column-max: 430px;
  --tap-min: 56px;
  --focus-ring: 0 0 0 3px var(--surface), 0 0 0 6px var(--ink);
  --dur: 180ms;
}

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