/*
 * テーマ（ライト / ダーク）の色の定義 ― 全ページ共通
 *
 * mvp.css の直後に読み込む。ページ側の CSS では色を直接書かず、ここの変数を使う。
 * <html data-theme="light|dark"> は assets/js/site.js が設定する
 * （保存された選択 → なければ OS の設定）。
 */

/* ===== ライト（既定） ===== */
/* 背景は真っ白だとまぶしいので、紙のようなオフホワイトにする */
:root {
    /* mvp.css の変数 */
    --color-bg: #f6f5f0;          /* ページの背景 */
    --color-bg-secondary: #e4e2da;
    --color-shadow: #e8e6de;
    --color-text: #222;           /* 真っ黒より少し柔らかく */

    --c-accent: #118bee;
    --c-text-strong: #333;        /* サイドバーのリンクなど */
    --c-text-muted: #666;         /* 説明文・日付・補足 */
    --c-text-faint: #999;         /* 件数・区切り記号など */
    --color-link: #1d5fbf;        /* リンク（mvp.css の #118bee より落ち着いた青） */
    --c-link-hover: #164a96;
    --c-border: #dcdad2;
    --c-border-soft: #e6e4dc;
    --c-hover-bg: #e9e7df;        /* ナビ・ボタンのホバー */
    --c-hover-bg-soft: #efeee8;   /* カード・一覧のホバー */
    --c-surface: #ecebe4;         /* 目次・コードブロックの背景 */
    --c-chip-bg: #fbfaf6;
    --c-tag-bg: #e2e0d8;
    --c-tag-bg-hover: #d6d4cb;
    --c-tag-text: #555;
    --c-inverse-bg: #333;         /* 濃い色のバッジ・ボタン */
    --c-inverse-bg-hover: #555;
    --c-figure-bg: #fff;          /* 図（白背景の SVG など）の下地 */
    --c-update-bg: #fbe9b7;       /* 「更新」のバッジ・更新した見出しの印 */
    --c-update-text: #6b4a00;
    --c-update-line: #e0a800;
    color-scheme: light;
}

/* ===== ダーク ===== */
:root[data-theme="dark"] {
    /* mvp.css の変数（mvp.css 自身のダーク配色と同じ値） */
    --color-accent: #0097fc4f;
    --color-bg: #333;
    --color-bg-secondary: #555;
    --color-link: #79b8ff;
    --color-secondary: #e20de9;
    --color-secondary-accent: #e20de94f;
    --color-shadow: #bbbbbb20;
    --color-table: #1f6fb2;       /* mvp.css の #0097fc より暗くして見出しの白文字を読みやすく */
    --color-text: #f7f7f7;
    --color-text-secondary: #aaa;
    --color-scrollbar: #666;

    --c-accent: #0097fc;
    --c-text-strong: #e6e6e6;
    --c-text-muted: #bbb;
    --c-text-faint: #999;
    --c-link-hover: #a8d1ff;
    --c-border: #555;
    --c-border-soft: #4a4a4a;
    --c-hover-bg: #444;
    --c-hover-bg-soft: #3b3b3b;
    --c-surface: #2a2a2a;
    --c-chip-bg: #3b3b3b;
    --c-tag-bg: #4d4d4d;
    --c-tag-bg-hover: #5c5c5c;
    --c-tag-text: #e0e0e0;
    --c-inverse-bg: #555;
    --c-inverse-bg-hover: #666;
    --c-figure-bg: #fff;
    --c-update-bg: #574300;
    --c-update-text: #ffe28a;
    --c-update-line: #c99a00;
    color-scheme: dark;
}

/* ===== リンク ===== */
/* 全ページで 1 色に統一。mvp.css の太字と、訪問済みリンクの紫をやめる */
a {
    font-weight: normal;
    text-underline-offset: 0.18em;
}
a:visited {
    color: var(--color-link);
}
a:hover {
    color: var(--c-link-hover);
    filter: none;
}
/* 本文以外（ナビ・サイドバー・一覧・目次・パンくず・記事フッター）は下線なし、ホバーで下線 */
header nav a,
aside a,
.note-item h4 a,
.group-title a,
.toc a,
.breadcrumb a,
#note-footer a {
    text-decoration: none;
}
header nav a:hover,
aside a:hover,
.note-item h4 a:hover,
.group-title a:hover,
.toc a:hover,
.breadcrumb a:hover,
#note-footer a:hover {
    text-decoration: underline;
}
/* 見出しの中のリンクは見出しの太さのまま */
h1 a, h2 a, h3 a, h4 a {
    font-weight: inherit;
}
/* タグ・絞り込みボタンはリンク色ではなく各自の配色 */
a.tag, a.tag:visited {
    color: var(--c-tag-text);
    text-decoration: none;
}
a.chip:visited {
    color: var(--c-text-strong);
}
a.chip.active, a.chip.active:visited {
    color: #fff;
}

/* mvp.css は表の見出し行の文字色に背景色を使うため、どちらのテーマでも白にする */
table thead th {
    color: #fff;
}

/* 入力欄もブラウザ標準の白ではなく、テーマの色にする */
input,
textarea,
select {
    background: var(--c-chip-bg);
    color: var(--color-text);
}

/* ===== 「更新」のバッジ（記事の日付・Notes 一覧・Recent Updates・更新した見出し） ===== */
.update-badge,
a.update-badge,
a.update-badge:visited {
    display: inline-block;
    background: var(--c-update-bg);
    color: var(--c-update-text);
    border-radius: 4px;
    padding: 0 0.45em;
    font-size: 0.8em;
    font-weight: bold;
    line-height: 1.6;
    white-space: nowrap;
    text-decoration: none;
    vertical-align: middle;
}
a.update-badge:hover {
    color: var(--c-update-text);
    text-decoration: underline;
}

/* ===== テーマ切り替えボタン（ナビの右端） ===== */
.theme-toggle {
    background: none;
    border: 1px solid var(--c-border);
    border-radius: 16px;
    color: var(--color-text);
    cursor: pointer;
    font-size: 0.85em;
    font-weight: normal;
    line-height: 1;
    margin: 0;
    padding: 6px 12px;
    white-space: nowrap;
}
.theme-toggle:hover {
    background: var(--c-hover-bg);
    filter: none;
}

/* ボタンが増えた分、狭い画面ではナビを折り返してはみ出さないようにする */
header nav ul {
    flex-wrap: wrap;
    row-gap: 8px;
}
@media (max-width: 768px) {
    /* mvp.css はこの幅でナビ項目を横幅いっぱいにするので、中身の幅に戻す */
    header nav ul li {
        width: auto;
        margin: 0 0.1rem;
    }
}
@media (max-width: 480px) {
    .theme-label {
        display: none;
    }
    .theme-toggle {
        padding: 6px 9px;
    }
}