/* ワイヤーフレーム用デザイントークン
 * 出典: ui-construction/assets/wireframe-design.md
 * Phase 4 で破棄され、Claude Design 側のトークンに置き換わる前提
 */
:root {
  --color-primary: #1A1A1A;
  --color-surface-light: #F5F5F5;
  --color-surface-mid: #D6D6D6;
  --color-link: #0055CC;
  --color-on-link: #FFFFFF;
  --color-error: #B00020;

  --font-base: 'Noto Sans JP', sans-serif;

  --fs-h1: 2.25rem;
  --fs-h2: 1.75rem;
  --fs-h3: 1.375rem;
  --fs-h4: 1.125rem;
  --fs-h5: 1rem;
  --fs-h6: 0.875rem;
  --fs-body-lg: 1.125rem;
  --fs-body-md: 1rem;
  --fs-body-sm: 0.875rem;
  --fs-body-caption: 0.75rem;

  --lh-heading: 1.4;
  --lh-body: 1.9;
  --lh-caption: 1.7;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 9999px;

  --container-max: 1080px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
}