/*
 * ヌリコヨミ デザイントークン
 *
 * 方向性: 1d「スイスの編集デザイン」を基本に、ダークだけ 1c「夜の手帳」の配色を使う。
 * 出典は docs/design/4-ui/project/ヌリコヨミ 4案.dc.html、決定の経緯は docs/spec/2026-09-13.md の「デザインの方向性」。
 *
 * - ライトとダークは端末の設定（prefers-color-scheme）で自動的に切り替える
 * - 角丸・影・グラデーション・質感（ノイズ）は使わない。区切りは罫線と余白で作る
 * - フォントは HTML の <head> で読み込む（@import は表示を遅らせるので使わない）:
 *   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 *   <link href="https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&family=Familjen+Grotesk:wght@400;500&display=swap" rel="stylesheet">
 */

:root {
  color-scheme: light dark;

  /* ---- 色: 役割（ライト） ---- */
  --color-bg: #ffffff;
  --color-surface: #f4f4f2;        /* ボトムシート、無効な入力欄の面 */
  --color-ink: #0a0a0a;            /* 文字 19.8:1 */
  --color-muted: #6b6b6b;          /* 補助の文字 5.3:1 */
  --color-disabled: #a3a3a0;       /* 無効な項目の文字 */
  --color-outside: #b4b4b0;        /* 前後の月の日付 */
  --color-rule: #0a0a0a;           /* 強い罫: 週の区切り、画面の区切り、操作部品の枠 */
  --color-rule-soft: #d7d7d4;      /* 弱い罫: 日の縦罫、項目の区切り */
  --color-signal: #e1261c;         /* 信号色: 選択中の日の縦罫、必須の＊、塗りモードの印 4.67:1 */
  --color-on-signal: #ffffff;
  --color-sunday: #e1261c;         /* 日曜・祝日の数字。祝日は●と祝日名でも示す */
  --color-saturday: #46586b;       /* 7.3:1 */
  --color-today-bg: #0a0a0a;       /* 今日: 日付を反転させる */
  --color-today-ink: #ffffff;
  --color-selected-bg: #f4f4f2;    /* 選択中の日: 面 ＋ 左に信号色の縦罫 */
  --color-danger: #e1261c;         /* 危険な操作（文字と罫で示す） */
  --color-deleted: #8f8f8c;        /* 削除済みカテゴリ: 中空の枠で示す */
  --color-primary-bg: #0a0a0a;     /* 主ボタン */
  --color-primary-ink: #ffffff;

  /* ---- カテゴリ色（ライト）: DB にはキー（blue など）を保存する ---- */
  --cat-blue: #0b4ea2;             /* 青     8.00:1 初期カテゴリ「仕事」 */
  --cat-green: #0f7a48;            /* 緑     5.39:1 初期カテゴリ「休み」 */
  --cat-orange: #e2650f;           /* 橙     3.44:1 初期カテゴリ「外出」 */
  --cat-purple: #5a2d8c;           /* 紫     9.59:1 初期カテゴリ「予定あり」 */
  --cat-magenta: #b5177e;          /* 赤紫   6.20:1 */
  --cat-teal: #0d7f97;             /* 青緑   4.67:1 */
  --cat-olive: #6e7a12;            /* 黄緑   4.71:1 */
  --cat-yellow: #d49b00;           /* 黄     2.47:1（黄色らしさを保つと 3:1 に届かない） */
  --cat-brown: #6b4226;            /* 茶     8.63:1 */
  --cat-slate: #46586b;            /* 青灰   7.32:1 */
  --cat-sky: #2f8fd1;              /* 水色   3.52:1 */
  --cat-lime: #5f9f2c;             /* 若葉   3.24:1 */

  /* ---- 文字 ---- */
  --font-ja: "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-num: "Familjen Grotesk", var(--font-ja);  /* 数字・欧文。数字は tabular-nums で桁をそろえる */
  --text-display: 64px;            /* 月の大きな数字「09」 */
  --text-title: 30px;              /* ボトムシートの日付「09.13」 */
  --text-heading: 17px;
  --text-input: 16px;              /* 入力欄。16px 未満だと iOS Safari が拡大する */
  --text-body: 13.5px;
  --text-caption: 11px;
  --leading-body: 1.65;
  --leading-table: 1.3;

  /* ---- 形 ---- */
  --radius: 0;
  --rule-width: 1px;
  --rule-soft-width: 0.5px;
  --gutter: 16px;                  /* 画面の左右の余白 */
  --tap-min: 44px;                 /* タップできる領域の最小 */
  --cell-height: 72px;             /* 月グリッドのセル */
  --bar-height: 7px;               /* 予定のバー（セル幅いっぱい。複数日は日をまたいで1本につなぐ） */
  --bar-gap: 2px;

  /* ---- 動き ---- */
  --dur-paint-rule: 60ms;          /* 塗る: 罫が締まる */
  --dur-paint-fill: 100ms;         /* 塗る: カテゴリ色に反転する */
  --dur-sheet: 180ms;              /* ボトムシートが下から出る */
  --dur-month: 80ms;               /* 月送り: 大きな数字だけ切り替わる */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

/* ---- ダーク: 1c「夜の手帳」の配色 ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0c0b0d;
    --color-surface: #141316;
    --color-ink: #eceae4;          /* 16.3:1 */
    --color-muted: #8e8a83;        /* 5.7:1 */
    --color-disabled: #5c5955;
    --color-outside: #4d4952;
    --color-rule: #4a4846;
    --color-rule-soft: #2a282c;
    --color-signal: #e79a72;       /* 暖色のアクセント 8.7:1 */
    --color-on-signal: #0c0b0d;
    --color-sunday: #cf7e6e;
    --color-saturday: #7f93b5;
    --color-today-bg: #eceae4;
    --color-today-ink: #0c0b0d;
    --color-selected-bg: #1d1b20;
    --color-danger: #d3705f;
    --color-deleted: #6b6a68;
    --color-primary-bg: #e79a72;
    --color-primary-ink: #0c0b0d;

    /* 暗い面の上で平らに塗る色。背景とのコントラストはすべて 4:1 以上 */
    --cat-blue: #6f93cf;
    --cat-green: #74a97e;
    --cat-orange: #d59a55;
    --cat-purple: #b39ad9;
    --cat-magenta: #d3708f;
    --cat-teal: #5fa3a0;
    --cat-olive: #9bb26a;
    --cat-yellow: #d8c06a;
    --cat-brown: #a5673f;
    --cat-slate: #6b7486;
    --cat-sky: #86c3e3;
    --cat-lime: #b5d67a;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    /* 罫が締まる動きだけ残し、色の反転・シート・月送りは即時にする */
    --dur-paint-fill: 0ms;
    --dur-sheet: 0ms;
    --dur-month: 0ms;
  }
}

/* カテゴリ色をキーから引く。要素に class="cat-blue" などを付け、色は var(--cat) で使う */
.cat-blue { --cat: var(--cat-blue); }
.cat-green { --cat: var(--cat-green); }
.cat-orange { --cat: var(--cat-orange); }
.cat-purple { --cat: var(--cat-purple); }
.cat-magenta { --cat: var(--cat-magenta); }
.cat-teal { --cat: var(--cat-teal); }
.cat-olive { --cat: var(--cat-olive); }
.cat-yellow { --cat: var(--cat-yellow); }
.cat-brown { --cat: var(--cat-brown); }
.cat-slate { --cat: var(--cat-slate); }
.cat-sky { --cat: var(--cat-sky); }
.cat-lime { --cat: var(--cat-lime); }