/* 跑步岛 · Design tokens
   Coral primary on deep navy. Dark-mode first. */

:root {
  /* Brand — coral spectrum */
  --brand-50:  #FFF1EB;
  --brand-100: #FFD9C7;
  --brand-200: #FFB89A;
  --brand-300: #FF9268;
  --brand-400: #FF7849;
  --brand-500: #FF6B4A;  /* coral primary */
  --brand-600: #F05438;
  --brand-700: #C53F26;

  /* Surfaces — deep sea ink */
  --bg-0: #07111F;
  --bg-1: #0E1A2B;
  --bg-2: #142235;
  --bg-3: #1B2C42;
  --bg-4: #25395A;

  /* Hairlines */
  --line-1: rgba(255, 255, 255, 0.06);
  --line-2: rgba(255, 255, 255, 0.10);
  --line-3: rgba(255, 255, 255, 0.18);

  /* Text */
  --ink-0: #F4F1EB;
  --ink-1: rgba(244, 241, 235, 0.92);
  --ink-2: rgba(244, 241, 235, 0.62);
  --ink-3: rgba(244, 241, 235, 0.42);
  --ink-4: rgba(244, 241, 235, 0.22);

  /* Accent */
  --sea-glow: #5CC8E6;

  /* Type scale (px) */
  --t-data-xl:   96px;
  --t-display-l: 80px;
  --t-display-m: 64px;
  --t-display-s: 48px;
  --t-title-l:   36px;
  --t-title-m:   28px;
  --t-title-s:   22px;
  --t-body-l:    18px;
  --t-body-m:    16px;
  --t-body-s:    14px;
  --t-caption:   12px;
  --t-mono-s:    11px;

  /* Spacing — 4px base */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;

  /* Radius */
  --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 20px; --r-5: 28px;
  --r-pill: 999px;

  /* Type families */
  --f-sans:    'Inter Tight', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --f-cn:      'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
  --f-display: 'Inter Tight', 'Plus Jakarta Sans', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;

  /* Easing */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}