/* 設計トークン。色・角丸・影の値はここだけに書く。
   各コンポーネントが 16 進数を直書きし始めると、配色を変えるたびに
   全ファイルを grep して回ることになる —— 実際この配色変更でそれをやった。
   例外はレトロ機の筐体（game.css）。あれは「机の上の物体」を描いた絵であって
   サイトの配色体系の一部ではないので、樹脂や液晶の色は個別に持つ。 */
:root {
  /* 面 */
  --page: #F2F8FC;          /* ページ地。カードを白く浮かせるため、白より少し沈める */
  --surface: #FFFFFF;       /* カード */
  --soft: #E3F1FB;          /* 淡い面。バッジ、選択中のタブ */
  --well: #2B4A66;          /* 沈んだ面。選択中の主タブなど */

  /* 文字 */
  --ink: #2B4A66;           /* 主文字 */
  --sub: #4A5A68;           /* 本文 */
  --muted: #7C8B99;         /* 補助・注記 */

  /* 線 */
  --line: #C8D8E4;
  --line-soft: #D9E7F1;

  /* 強調 */
  --accent: #2E7CC3;        /* リンク、選択、見出しの標 */
  --accent-hover: #256AA8;
  --accent-weak: #BFDCEE;

  /* 行動喚起。寒色の面に対する補色なので、視線が必ず最初にここへ落ちる */
  --cta: #F08300;
  --cta-edge: #C56900;      /* 実体のある影（0 4px 0）。押せる物に見せる */
  --cta-hover: #DD7A00;

  /* 意味を持つ色 */
  --green: #4E8A5C;         /* ON 状態 */
  --you: #D95B43;           /* 自分の記録 */
  --gold: #E8B94F;
  --silver: #9CB3C4;
  --bronze: #C08552;

  /* 形 */
  --radius: 6px;            /* バッジ、小さな面（設計案の実値）*/
  --radius-card: 14px;      /* カード */
  --shadow-card: 0 1px 2px rgb(43 74 102 / .04);

  /* 盤面まわり（設計案の実値をそのまま持つ）*/
  --board-bg: #C9E4F2;
  --board-edge: #9CC4DE;
  --board-grid: #B3D4E8;
  --board-ink: #2E5F80;
  --board-hint: #6E93AC;
  --dash: #DCE8F1;          /* 行の区切りの破線 */
  --hi: #E8702A;            /* 自己ベストだけの暖色 */
  --mascot-bg: #FFE3D6;
  --pill-track: #E3EDF5;    /* 丸ピルの溝 */
  --footer-bg: #DEEBF5;

  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-synthesis: none;
}