/* 全ページ共通のデザイン
   各ページの <style> のあとに読み込んで、色などをそろえる。
   色を変えたいときは、この一番上の --t- で始まる色だけ書き換えればよい。
   （図鑑メーカーの分類ラベルの色は、そのまま残る） */

/* 夜（標準） */
:root:root {
  --t-bg: #11131c;
  --t-surface: #1b1e2b;
  --t-surface2: #252939;
  --t-border: #323750;
  --t-text: #eceef7;
  --t-muted: #9ba2ba;
  --t-accent: #a99cf0;
  --t-accent-bg: #2a2650;
  --t-accent-ink: #11131c;
  --t-gold: #e3c27a;

  /* 絵の練習ログ・支払いログ・日記エディタ */
  --bg: var(--t-bg);
  --surface: var(--t-surface);
  --surface2: var(--t-surface2);
  --border: var(--t-border);
  --text: var(--t-text);
  --muted: var(--t-muted);
  --accent: var(--t-accent);
  --accent-bg: var(--t-accent-bg);

  /* 戦闘・成長シミュレータ、探索地の案づくり */
  --panel: var(--t-surface);
  --sub: var(--t-muted);
  --line: var(--t-border);
  --accent-text: var(--t-accent-ink);
  --bar: var(--t-accent);
  --barbg: var(--t-surface2);

  /* 図鑑メーカー */
  --card: var(--t-surface);
  --ink: var(--t-text);
  --ink2: var(--t-muted);
  --accent-ink: var(--t-accent-ink);
  --accent-soft: var(--t-accent-bg);
}

/* 昼（端末が明るい表示のとき） */
@media (prefers-color-scheme: light) {
  :root:root:not([data-theme="dark"]) {
    --t-bg: #f2f3f9;
    --t-surface: #ffffff;
    --t-surface2: #e9ebf4;
    --t-border: #d3d7e6;
    --t-text: #1c2033;
    --t-muted: #5c6480;
    --t-accent: #4b3fb8;
    --t-accent-bg: #e4e1fb;
    --t-accent-ink: #ffffff;
    --t-gold: #9a6b10;
  }
}

/* 背景：上のほうに、ほんのり明かりを置く */
body {
  background-image: radial-gradient(120% 60% at 50% -10%, var(--t-accent-bg), transparent 70%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* 「← ツール一覧」のリンク */
.home-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 4px 14px;
  margin: 0 0 4px;
  border: 1px solid var(--t-border);
  border-radius: 999px;
  background: var(--t-surface);
  color: var(--t-muted);
  font-size: 14px;
  text-decoration: none;
}

/* ページ下の「バージョン・最新版に更新」 */
#pwa-info { color: var(--t-muted); }

:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }