:root {
  /* palette — tokyo night */
  --ink-0:     #0A0A0F;
  --ink-1:     #131321;
  --ink-2:     #1E1E30;
  --ink-3:     #272742;
  --paper:     #EDEDF0;
  --paper-2:   #9A9AA8;
  --muted:     #6B6B7C;
  --pink:      #FF2E88;
  --pink-soft: rgba(255, 46, 136, 0.15);
  --cyan:      #00E5FF;
  --cyan-soft: rgba(0, 229, 255, 0.12);
  --warn:      #FFB547;

  /* typography */
  --font-display: "Unbounded", "Hiragino Sans", sans-serif;
  --font-body:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-jp:      "Noto Sans JP", "Hiragino Sans", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 48px;
  --s-9: 64px;
  --s-10: 96px;

  /* radii */
  --r-1: 6px;
  --r-2: 12px;
  --r-3: 18px;
  --r-pill: 9999px;

  /* motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;

  /* layout */
  --max-w: 560px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
}