/*
 * 桝田製作所 デザイントークン
 * ソース: Claude Design「デザイントークン」(Tokens.dc.html)
 * masup.dev / ask.masup.dev 共通。セマンティックトークン名は固定し、値の改定はこのファイルで行う。
 *
 * コントラスト（デザイン側で確認済み）:
 * - 本文テキストは両モードで 4.5:1 以上、罫線・フォーカスは 3:1 以上
 * - --color-text-muted は大きな文字（18.5px 太字以上）と装飾限定
 */

:root {
  /* 1. カラープリミティブ */
  --masu-white: #f7f5f0; /* 地（温白） */
  --masu-ink: #1c1b18; /* 墨 */
  --masu-ink-2: #3d3b36; /* 墨・二次 */
  --masu-ink-3: #55524b; /* 墨・三次 */
  --masu-vermilion: #b3401f; /* 朱（アクセント） */
  --masu-vermilion-deep: #8f3319; /* 朱・hover */
  --masu-red: #a03123; /* エラー */
  --masu-blue: #2e5f8a; /* 成功（青系・CUD 配慮） */
  --masu-gold: #e0b64f; /* 金（ダーク側アクセント） */
  --masu-paper: #ffffff; /* 面（カード・入力） */
  --masu-ink-dark-bg: #161511; /* ダーク地 */
  --masu-white-dim: #c4c1b8; /* 反転面の二次文字 */

  /* 2. セマンティックカラー（ライト） */
  --color-bg: var(--masu-white); /* ページ背景 */
  --color-surface: var(--masu-paper); /* カード・入力面 */
  --color-text-primary: var(--masu-ink); /* 本文・見出し */
  --color-text-secondary: var(--masu-ink-2); /* 補足本文 */
  --color-text-muted: var(--masu-ink-3); /* キャプション */
  --color-border: var(--masu-ink); /* 構造罫線（2px） */
  --color-border-soft: #1c1b1833; /* 補助罫線・桝目 */
  --color-accent: var(--masu-vermilion); /* アクセント・強調 */
  --color-accent-hover: var(--masu-vermilion-deep); /* アクセント hover */
  --color-error: var(--masu-red); /* エラー文字・枠 */
  --color-success: var(--masu-blue); /* 成功表示 */
  --color-focus: var(--masu-vermilion); /* focus-visible（3px） */
  --color-accent-contrast: #ffffff; /* アクセント面上の文字（実装補完: Tokens.dc.html §5 ボタン見本より） */

  /* 3. タイポグラフィ */
  --font-body: "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, system-ui,
    sans-serif; /* 和文・本文（システムスタック・Web フォントなし） */
  --font-display: "Space Grotesk", sans-serif; /* 欧文見出し・番号・URL のみ（サブセット配信・約 15KB） */

  /* type scale: size / line-height / weight（px 指定はデザイン準拠、rem 換算 16px 基準） */
  --text-display-size: 3.5rem; /* 56px */
  --text-display-lh: 1.28;
  --text-display-weight: 700;
  --text-h1-size: 2.5rem; /* 40px */
  --text-h1-lh: 1.4;
  --text-h1-weight: 700;
  --text-h2-size: 1.75rem; /* 28px */
  --text-h2-lh: 1.5;
  --text-h2-weight: 700;
  --text-h3-size: 1.125rem; /* 18px */
  --text-h3-lh: 1.6;
  --text-h3-weight: 700;
  --text-body-size: 0.9375rem; /* 15px */
  --text-body-lh: 2;
  --text-body-weight: 400;
  --text-small-size: 0.8125rem; /* 13px */
  --text-small-lh: 1.9;
  --text-small-weight: 400;

  /* 4. スペーシング（4px 基数） */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-22: 88px;

  /* 罫線・角丸・レイアウト */
  --border-width: 2px; /* 構造 */
  --border-width-soft: 1px; /* 補助 */
  --radius: 0; /* 角丸なし・桝の直角 */
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --content-max: 1080px;
  --measure: 38em; /* 本文行長 約 38 字 */
  --grid-unit: 48px; /* 桝目パターン */
  --target-min: 24px; /* 最小ターゲット 24×24px（WCAG 2.5.8） */

  /* ブレークポイント（参照値。メディアクエリでは直接使えないため実装側は値を揃えること）
     --bp-sm: 360px / --bp-md: 768px / --bp-lg: 1080px */

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--masu-ink-dark-bg);
    --color-surface: #221f1a;
    --color-text-primary: #f0eee7;
    --color-text-secondary: var(--masu-white-dim);
    --color-text-muted: #a8a49a;
    --color-border: #f0eee7;
    --color-border-soft: #f0eee72e;
    --color-accent: var(--masu-gold);
    --color-accent-hover: #eac979;
    --color-error: #f2a08c;
    --color-success: #8ab9dd;
    --color-focus: var(--masu-gold);
    --color-accent-contrast: var(--masu-ink);
  }
}