/*
 * Design OS 基本トークン（Phase 1 雛形・2026-10-26 承認）
 * base.tokens.json と同じ値を CSS カスタムプロパティとして手書きしたもの。
 * 名前は JSON のパスを「-」でつないだもの（例: spacing.within-group → --spacing-within-group）。
 * 参照（{spacing.scale.2}）は var() で表す。
 *
 * 注意: コメント中のルール ID は承認済み（2026-10-26、強度 SHOULD）。明確な理由があれば案件ごとに外してよい（スタイルガイドの「ルールからの逸脱」に記録）。
 * 値の根拠: [rule]=ルール本文の数値 / [estimate]=ルール本文で推定とされた換算 / [placeholder]=仮値（案件ごとに差し替える）
 */

:root {
  /* color [placeholder] R-0101 R-0103 R-0104 R-0105 R-0106 R-0107 R-0110 R-0111
     無彩色の仮値。差し替えたら文字色×背景色の組み合わせごとにコントラスト比を測り直す（R-0107） */
  --color-base: #FFFFFF;
  --color-surface: #F5F5F5;      /* 色面による区切り（R-0005） */
  --color-main: #404040;
  --color-on-main: #FFFFFF;      /* main 上で約10.4:1 */
  --color-accent: #262626;       /* 役割を決めた要素だけに使う（R-0101） */
  --color-on-accent: #FFFFFF;    /* accent 上で約15.1:1 */
  --color-text: #1A1A1A;         /* base 上で約17.4:1 */
  --color-text-muted: #595959;   /* base 上で約7.0:1（R-0019 R-0118） */
  --color-border: #D9D9D9;       /* 意味のある罫線だけに使う（R-0005） */

  /* color.feedback [placeholder] R-0105 R-0106 R-0107
     機能色。対応表（R-0105）で意味を固定し、慣習色（R-0106）を既定にして差し替える */
  --color-feedback-error: #4D4D4D;
  --color-feedback-warning: #4D4D4D;
  --color-feedback-success: #4D4D4D;
  --color-feedback-info: #4D4D4D;

  /* color-area [rule] R-0102 面積比の目安（A077 約7:2:1）。点検用で、スタイルには使わない */
  --color-area-dominant: 0.7;
  --color-area-secondary: 0.2;
  --color-area-accent: 0.1;

  /* accessibility [rule] R-0107 R-0019 R-0118 */
  --accessibility-contrast-min-normal: 4.5;
  --accessibility-contrast-min-large: 3;
  --accessibility-large-text-size: 24px;
  --accessibility-large-text-size-bold: 18.7px;

  /* spacing.scale [placeholder] R-0029 余白の段階 */
  --spacing-scale-1: 4px;
  --spacing-scale-2: 8px;
  --spacing-scale-3: 16px;
  --spacing-scale-4: 24px;
  --spacing-scale-5: 32px;
  --spacing-scale-6: 48px;
  --spacing-scale-7: 64px;
  --spacing-scale-8: 96px;

  /* spacing [placeholder] R-0001 R-0002 R-0029
     守る関係: within-group < between-groups（R-0001） / heading-to-body < above-heading（R-0002） */
  --spacing-within-group: var(--spacing-scale-2);
  --spacing-between-groups: var(--spacing-scale-5);
  --spacing-heading-to-body: var(--spacing-scale-2);
  --spacing-above-heading: var(--spacing-scale-5);
  --spacing-section: var(--spacing-scale-8);
  --spacing-control-block: var(--spacing-scale-3);   /* 四辺が同量に見えるか目視で補正（R-0011） */
  --spacing-control-inline: var(--spacing-scale-4);
  --spacing-gutter: var(--spacing-scale-3);

  /* typography.family [placeholder] R-0116 R-0117 R-0118 汎用ファミリー名のみ（第三者フォントなし） */
  --typography-family-heading: sans-serif;
  --typography-family-body: sans-serif;
  --typography-family-caption: sans-serif;   /* ゴシック系（R-0118） */

  /* typography.weight [placeholder] R-0015 heading > body */
  --typography-weight-heading: 700;
  --typography-weight-body: 400;

  /* typography.size [placeholder] R-0018 R-0020
     序列: title ≧ heading ≧ body ＞ caption / body ≦ lead ＜ title */
  --typography-size-title: 2rem;
  --typography-size-heading: 1.5rem;
  --typography-size-lead: 1.125rem;
  --typography-size-body: 1rem;
  --typography-size-caption: 0.75rem;

  /* typography.size-min [rule] R-0118 スマートフォンの最小文字の目安（A136、根拠は未提示） */
  --typography-size-min-caption-mobile: 11px;

  /* typography.line-height-body [estimate] R-0120 50〜75% → line-height 約1.5〜1.75（換算は推定） */
  --typography-line-height-body-min: 1.5;
  --typography-line-height-body-max: 1.75;
  --typography-line-height-body-default: 1.6;   /* 範囲内の仮の選択 */

  /* typography.line-height [placeholder] R-0120 */
  --typography-line-height-heading: 1.4;
  --typography-line-height-caption: 1.5;

  /* typography.measure [estimate] R-0120 本文1行の字数（A056: 最長40〜50字・最短13〜15字、Web適用は推定）
     使い方: max-inline-size: calc(var(--typography-measure-body-max-chars) * 1em); */
  --typography-measure-body-max-chars: 50;
  --typography-measure-body-min-chars: 15;

  /* typography.letter-spacing [rule] R-0121 本文はベタ。見出しは見た目で調整する前提の初期値 */
  --typography-letter-spacing-body: 0px;
  --typography-letter-spacing-heading: 0px;

  /* radius [placeholder] R-0012 同じ役割の部品は同じ半径 */
  --radius-control: 4px;
  --radius-card: 8px;

  /* shadow [placeholder] R-0012 R-0017 R-0128 方向と濃さを全要素で揃えた弱い影1種。文字には付けない */
  --shadow-raised: 0px 2px 4px 0px #0000001F;

  /* motion [estimate] approved（2026-11-03 追加、D-034 で採用） 北極星 D-MOTION、data/recommend/motion_presets.jsonl
     既定は MO-subtle。本文・フォーム・料金表は動かさない。prefers-reduced-motion で 0 にする（下の @media） */
  --motion-duration-instant: 100ms;
  --motion-duration-fast: 200ms;
  --motion-duration-base: 400ms;
  --motion-duration-slow: 600ms;
  --motion-duration-emphasis: 800ms;   /* MO-rich の FV・見出しだけ */
  --motion-easing-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
  --motion-easing-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-easing-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-distance-small: 8px;
  --motion-distance-medium: 24px;
  --motion-stagger: 80ms;              /* まとまり内で最大 3 要素 */
  --motion-hover-scale: 1.03;
  --motion-autoplay-min: 5000ms;       /* 自動送りは停止ボタン必須 */

  /* icon [placeholder] approved（2026-11-03 追加、D-034 で採用） R-0012 R-0126 北極星 B-4
     1 つのセットに統一し、同じ役割は同じ大きさ・同じ線幅。装飾アイコン・絵文字は使わない */
  --icon-size-inline: 1em;
  --icon-size-control: 20px;
  --icon-size-feature: 40px;
  --icon-stroke: 1.5px;
  --icon-gap: 0.5em;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-instant: 0ms;
    --motion-duration-fast: 0ms;
    --motion-duration-base: 0ms;
    --motion-duration-slow: 0ms;
    --motion-duration-emphasis: 0ms;
    --motion-stagger: 0ms;
    --motion-hover-scale: 1;
  }
}