/* 知識の羅針盤 と 知識のパレット（infopalatte.net の WordPress）で共通の色・寸法の値。
   この2つのサイトの見た目の正はこのファイル1か所。WordPress のテーマは、配置先（public_html/dictionary/static/tokens.css）を
   同じサーバーのディスクから読んで差し込むので、値を変えると両方のサイトに効く。変数の名前を変えるときはテーマ側も直す。
   使う側は var(--名前, 既定値) で書き、このファイルが読めなくてもライトの配色で表示が崩れないようにする */

:root {
  color-scheme: light;
  --color-text: #1f2328;
  --color-muted: #59636e;
  --color-bg: #ffffff;
  --color-surface: #f6f8fa;
  --color-border: #d0d7de;
  --color-link: #0b5cad;
  --color-accent: #8a3b12;
  --color-on-accent: #ffffff; /* アクセント色の地に載せる文字（ボタン・ページ送りの現在地） */
  --color-notice-bg: #fff4e5;
  --color-notice-border: #d97706;
  --color-page: #f5f4f0; /* 画面の地の色（本文の面は --color-bg） */
  --color-accent-strong: #6b2c0c;
  --color-accent-soft: #f8eee6;
  --color-border-soft: #e4e2dc;
  --shadow-card: 0 1px 2px rgb(31 35 40 / 6%), 0 2px 8px rgb(31 35 40 / 4%);
  --shadow-raise: 0 4px 16px rgb(31 35 40 / 12%);
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2359636e' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 3.5 3.5'/%3E%3C/svg%3E");
  --radius-card: 10px;
  --font-body:
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic",
    "Meiryo", sans-serif;
  --font-size-base: 1rem;
  --line-height: 1.85;
  --measure: 40em; /* PCで1行38〜42字 */
  --space: 1rem;
  --radius: 6px;
}

/* ダークモード（端末の設定に従う。2026-10-20 運営者決定）。印刷はライトのまま（A4 1枚の判定を変えない）なので screen に閉じる。
   文字・リンク・アクセントと各地の色、ボタンの文字とアクセント色は、どれもコントラスト 4.5:1 以上（WCAG AA） */
@media screen and (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-text: #ebe7e1;
    --color-muted: #a9a196;
    --color-bg: #1e1b18;
    --color-surface: #29251f;
    --color-border: #4a443d;
    --color-link: #82b8f2;
    --color-accent: #e39a6c;
    --color-on-accent: #1a1310;
    --color-notice-bg: #33260f;
    --color-notice-border: #d97706;
    --color-page: #151311;
    --color-accent-strong: #f2b993;
    --color-accent-soft: #3a2b21;
    --color-border-soft: #3a352f;
    --shadow-card: 0 1px 2px rgb(0 0 0 / 40%), 0 2px 8px rgb(0 0 0 / 25%);
    --shadow-raise: 0 4px 16px rgb(0 0 0 / 50%);
    --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23a9a196' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 3.5 3.5'/%3E%3C/svg%3E");
  }
}