/* 都道府県クイズ 共通デザイントークン
   Duolingo実測値ベース（2026-07-29 duolingo.com本番から採取）。
   コントラスト修正適用済み（2026-08-06）: --hare/--muted/--g-d を WCAG AA 4.5:1以上に。 */

:root {
  --bg: #FFFFFF;
  --soft: #F7F7F7;
  --card: #FFFFFF;
  --ink: #4B4B4B;
  --ink-strong: #4B4B4B;
  --muted: #666666;
  --hare: #767676;
  --line: #E5E5E5;
  --g: #58CC02;
  --g-d: #407A00;
  --g-soft: rgba(88, 204, 2, .14);
  --blue: #1CB0F6;
  --red: #FF4B4B;
  --red-soft: #FFDFE0;
  --yellow: #FFC800;
  --orange: #FF9600;
  --hd-bg: rgba(255, 255, 255, .96);
  --radius: 16px;
  --btn-r: 12px;
  --maxw: 640px;
  --fs: "Hiragino Maru Gothic ProN", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
        "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
}

/* ── リセット ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ── フォーカス（キーボード操作時のみ表示） ── */
:focus-visible {
  outline: 2px solid var(--g);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) {
  outline: none;
}