/* =========================
   css/theme.css
   - 色/サイズは全部ここ（変数で割り当て）
   ========================= */
:root {
	/* fonts */
	--ui-font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic",
		"Meiryo", sans-serif;

	/* sizing */
	--radius: 14px;
	--radius-sm: 10px;
	--bar-btn-h: 32px;
	--bar-btn-px: 10px;

	/* motion */
	--t-fast: 120ms;
	--t-mid: 180ms;
	--ease: cubic-bezier(0.2, 0.8, 0.2, 1);

	/* shadows */
	--shadow-1: 0 12px 28px rgba(0, 0, 0, 0.2);
	--shadow-2: 0 8px 18px rgba(0, 0, 0, 0.16);

	--ed-paper-tex: none; /* デフォは無し */

	/* ========= semantic tokens (theme assigns) ========= */
	--bg: #0f1116;
	--bg2: #121623;

	--panel: #141a26;
	--panel2: #0f1420;

	--topbar: #141824; /* app top bar */
	--midbar: #141824; /* editor bar */
	--bar-text: rgba(255, 255, 255, 0.9);

	--text: rgba(255, 255, 255, 0.9);
	--muted: rgba(255, 255, 255, 0.62);

	--line: rgba(255, 255, 255, 0.12);
	--line-2: rgba(255, 255, 255, 0.08);

	--btn: rgba(255, 255, 255, 0.08);
	--btn2: rgba(255, 255, 255, 0.14);

	--field: rgba(255, 255, 255, 0.06);
	--field2: rgba(255, 255, 255, 0.1);

	--accent: #d7b36a;
	--danger: #e56b6b;

	--caret: rgba(255, 255, 255, 0.9);
	--sel-bg: rgba(235, 243, 255, 0.18);
	--sel-fg: rgba(255, 255, 255, 0.92);

	--editor-size: 14px;
	--editor-font: var(--ui-font);

	--range-track: rgba(255, 255, 255, 0.14);
	--range-fill: rgba(255, 255, 255, 0.45);

	--focus-ring: rgba(43, 115, 199, 0.45);
	--row-active-bg: rgba(140, 170, 255, 0.18);
	--row-active-bd: rgba(140, 170, 255, 0.32);

	--btn-primary-bg: rgba(140, 170, 255, 0.18);
	--btn-primary-bd: rgba(140, 170, 255, 0.42);
	--btn-primary-fg: var(--text);

	--menu-hover-bg: rgba(140, 170, 255, 0.1);
	--menu-hover-bd: rgba(140, 170, 255, 0.22);
	--menu-open-bg: rgba(140, 170, 255, 0.14);
	--menu-open-bd: rgba(140, 170, 255, 0.32);

	--drop-outline: rgba(140, 170, 255, 0.55);

	/* editor-only (本文だけ独立させたい時はここをいじる) */
	--ed-bg: transparent;
	--ed-fg: var(--text);
	--ed-caret: var(--caret);
	--ed-bar-bg: var(--midbar);
	--ed-bar-fg: var(--bar-text);
	--ed-bar-line: var(--line);
	--ed-btn-line: var(--line-2);
	--ed-btn-line-hover: var(--line);
	--ed-btn-bg: var(--btn);
	--ed-btn-bg-hover: var(--btn2);
}

/* animations off */
body[data-anim="off"] * {
	transition: none !important;
	animation: none !important;
}

/* ===== dark ===== */
body[data-theme="dark"] {
	/* 背景：青みを削ってニュートラル寄り */
	--bg: #111211;
	--bg2: #171816;

	/* パネル：黒に寄せる（青紫を消す） */
	--panel: #161715;
	--panel2: #121311;

	/* バー：少しだけ明るい黒（段差で迷わない） */
	--topbar: #151614;
	--midbar: #151614;

	/* 文字：真っ白を避ける（眩しさ減） */
	--text: rgba(238, 240, 235, 0.9);
	--muted: rgba(238, 240, 235, 0.58);

	/* 境界：主張弱く */
	--line: rgba(238, 240, 235, 0.1);
	--line-2: rgba(238, 240, 235, 0.06);

	/* ボタン/入力：ほんのり明るい黒 */
	--btn: rgba(238, 240, 235, 0.06);
	--btn2: rgba(238, 240, 235, 0.1);
	--field: rgba(238, 240, 235, 0.05);
	--field2: rgba(238, 240, 235, 0.08);

	/* 群青/ウルトラマリン系（刺さらないよう彩度落とし） */
	--accent: #7f93c9; /* くすんだウルトラマリン寄り */
	--danger: #d07a7a;

	/* 選択：弱めのグレー青 */
	--sel-bg: rgba(127, 147, 201, 0.22);
	--sel-fg: rgba(245, 246, 242, 0.92);
	--caret: rgba(238, 240, 235, 0.88);

	/* range */
	--range-track: rgba(238, 240, 235, 0.1);
	--range-fill: rgba(127, 147, 201, 0.55);

	/* フォーカス/アクティブ：目立ちすぎない */
	--focus-ring: rgba(127, 147, 201, 0.4);
	--row-active-bg: rgba(127, 147, 201, 0.14);
	--row-active-bd: rgba(127, 147, 201, 0.26);

	--btn-primary-bg: rgba(127, 147, 201, 0.16);
	--btn-primary-bd: rgba(127, 147, 201, 0.3);
	--btn-primary-fg: var(--text);

	--menu-hover-bg: rgba(159, 178, 200, 0.08);
	--menu-hover-bd: rgba(159, 178, 200, 0.18);
	--menu-open-bg: rgba(159, 178, 200, 0.1);
	--menu-open-bd: rgba(159, 178, 200, 0.22);

	--drop-outline: rgba(127, 147, 201, 0.5);
	--bar-text: var(--text);

	/* editor-only（本文だけ紙/黒など後で分けたければここ） */
	--ed-bg: transparent;
	--ed-fg: var(--text);
	--ed-caret: var(--caret);
	--ed-bar-bg: var(--midbar);
	--ed-bar-fg: var(--bar-text);
	--ed-btn-line: var(--line-2);
	--ed-btn-line-hover: var(--line);
	--ed-btn-bg: var(--btn);
	--ed-btn-bg-hover: var(--btn2);

	--tex-global: radial-gradient(1100px 700px at 18% 0%, rgba(127, 147, 201, 0.08), rgba(0, 0, 0, 0) 55%);
}

/* ===== sepia ===== */
body[data-theme="sepia"] {
	--bg: #f2e9dc;
	--bg2: #e8dccb;
	--panel: #f6efe3;
	--panel2: #efe3d3;
	--topbar: #3a2b22;
	--midbar: #3a2b22;
	--text: rgba(43, 29, 18, 0.92);
	--muted: rgba(43, 29, 18, 0.66);
	--accent: #8b6f2a;
	--danger: #a04444;
	--btn: rgba(58, 43, 34, 0.08);
	--btn2: rgba(58, 43, 34, 0.12);
	--field: rgba(58, 43, 34, 0.06);
	--field2: rgba(58, 43, 34, 0.1);
	--caret: rgba(43, 29, 18, 0.92);
	--sel-bg: rgba(58, 43, 34, 0.22);
	--sel-fg: rgba(43, 29, 18, 0.92);
	--line: rgba(40, 24, 15, 0.12);
	--line-2: rgba(40, 24, 15, 0.08);
	--range-track: rgba(40, 24, 15, 0.14);
	--range-fill: rgba(139, 111, 42, 0.55);
	--focus-ring: rgba(139, 111, 42, 0.45);
	--row-active-bg: rgba(139, 111, 42, 0.14);
	--row-active-bd: rgba(139, 111, 42, 0.28);
	--btn-primary-bg: rgba(139, 111, 42, 0.16);
	--btn-primary-bd: rgba(139, 111, 42, 0.38);
	--btn-primary-fg: rgba(245, 234, 214, 0.92);
	--menu-hover-bg: rgba(139, 111, 42, 0.1);
	--menu-hover-bd: rgba(139, 111, 42, 0.22);
	--menu-open-bg: rgba(139, 111, 42, 0.14);
	--menu-open-bd: rgba(139, 111, 42, 0.32);
	--drop-outline: rgba(139, 111, 42, 0.5);
	--bar-text: rgba(245, 234, 214, 0.92);

	/* editor-only（紙色にしたければここ） */
	/* --ed-bg: #f3e1c3;
     --ed-fg: rgba(43,29,18,.92);
     --ed-caret: rgba(43,29,18,.92); */
	--ed-bar-bg: var(--midbar);
	--ed-bar-fg: var(--bar-text);
	--ed-btn-line: rgba(245, 234, 214, 0.28);
	--ed-btn-line-hover: rgba(245, 234, 214, 0.4);
	--ed-btn-bg: rgba(245, 234, 214, 0.1);
	--ed-btn-bg-hover: rgba(245, 234, 214, 0.16);
	--ed-bg: #f3e1c3;
	--ed-fg: rgba(43, 29, 18, 0.92);
	--ed-caret: rgba(43, 29, 18, 0.92);
	--ed-paper-tex: radial-gradient(1200px 800px at 18% 0%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 55%),
		radial-gradient(900px 600px at 80% 30%, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0) 60%),
		repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.018) 0 1px, rgba(0, 0, 0, 0) 1px 3px);

	--tex-editor: radial-gradient(1200px 800px at 18% 0%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%),
		radial-gradient(900px 600px at 80% 30%, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0) 60%),
		repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.018) 0 1px, rgba(0, 0, 0, 0) 1px 3px);

	--tex-global: radial-gradient(1200px 800px at 18% 0%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%),
		radial-gradient(900px 600px at 80% 30%, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0) 60%),
		repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.018) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
}

/* ===== light ===== */
body[data-theme="light"] {
	--bg: #f4f7fb;
	--bg2: #eef3f9;

	--panel: #fbfdff;
	--panel2: #f2f6fb;

	--topbar: #e9f1f8;
	--midbar: #e9f1f8;

	--text: rgba(15, 25, 35, 0.92);
	--muted: rgba(15, 25, 35, 0.65);

	--line: rgba(15, 25, 35, 0.3);
	--line-2: rgba(15, 25, 35, 0.2);

	--btn: rgba(15, 25, 35, 0.06);
	--btn2: rgba(15, 25, 35, 0.1);
	--field: rgba(43, 115, 199, 0.08);
	--field2: rgba(43, 115, 199, 0.12);

	/* 勿忘草（forget-me-not）アクセント：固定 */
	--accent: #89c3eb; /* 例：勿忘草っぽい水色 */

	--sel-bg: rgba(43, 115, 199, 0.22);
	--sel-fg: rgba(12, 18, 24, 0.92);

	--focus-ring: rgba(43, 115, 199, 0.45);
	--row-active-bg: rgba(43, 115, 199, 0.14);
	--row-active-bd: rgba(43, 115, 199, 0.32);

	--btn-primary-bg: rgba(43, 115, 199, 0.14);
	--btn-primary-bd: rgba(43, 115, 199, 0.34);
	--btn-primary-fg: var(--text);

	--menu-hover-bg: rgba(43, 115, 199, 0.08);
	--menu-hover-bd: rgba(43, 115, 199, 0.18);
	--menu-open-bg: rgba(43, 115, 199, 0.12);
	--menu-open-bd: rgba(43, 115, 199, 0.28);

	--drop-outline: rgba(43, 115, 199, 0.45);
	--bar-text: rgba(0, 0, 0, 0.82);
	--caret: rgba(10, 14, 18, 0.92);

	/* editor */
	--ed-bg: transparent;
	--ed-fg: var(--text);
	--ed-caret: var(--caret);
	--ed-bar-bg: var(--midbar);
	--ed-bar-fg: var(--bar-text);
	--ed-btn-line: var(--line-2);
	--ed-btn-line-hover: var(--line);
	--ed-btn-bg: var(--btn);
	--ed-btn-bg-hover: var(--btn2);

	/* textureは基本なし（必要なら薄く） */
	--tex-global: none;
	--tex-editor: none;
}

/* base background + selection (theme-driven) */
body {
	font-family: var(--ui-font);
	background: radial-gradient(1100px 700px at 18% 0%, var(--bg2), var(--bg));
	color: var(--text);
}
::selection {
	background: var(--sel-bg);
	color: var(--sel-fg);
}
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
	accent-color: var(--accent);
}