/*
 * My〇〇系のPWAに共通する土台。配色トークン・形のトークン・最小限のリセットだけを持つ。
 * 規約の本文はPIRの feedback_app_gui.md が正であり、ここはその値の置き場である。
 *
 * このファイルは MyKit が配る。アプリ側で直接編集しないこと(`npx mykit check` が落ちる)。
 * 置き場所は各アプリの public/mykit.css で、index.html で style.css より前に読む。
 *
 * 配色の方針
 *  - 既定をダークにする(常用がダークのため、環境の判定に依存させない)
 *  - 背景・面・境界はすべて無彩色。純黒(#000)は使わず #121212 を基準にし、
 *    面が上に重なるほど明度を上げて階層を出す
 *  - 色を持つのはアクセント(寒色)と警告だけ。本文は純白にしない(暗所での滲みを避ける)
 *
 * アプリ固有のトークン(MyMoneyの --income、MyToDoの --header-h など)は
 * アプリ側の style.css で :root に足す。
 */

:root {
  color-scheme: dark; /* チェックボックスや日付欄など、ブラウザ標準の部品も配色に合わせる */

  --bg: #121212;
  --surface: #1e1e1e;
  --surface-raised: #262626;
  --line: #333333;
  --text: #e8e8e8;
  --muted: #a0a0a0;
  --accent: #6ea8fe;
  --on-accent: #10151d;
  --alert: #ff8a80;

  --tap: 44px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-sheet: 14px;

  --nav-h: 56px;
  --record-h: 52px;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --bg: #fafafa;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --line: #e0e0e0;
    --text: #1a1a1a;
    --muted: #5f5f5f;
    --accent: #1863dc;
    --on-accent: #ffffff;
    --alert: #c62828;
  }
}

* {
  box-sizing: border-box;
}

/* id指定の display が UA の [hidden] に勝ってしまうため明示する */
[hidden] {
  display: none !important;
}

html {
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}