/*
* テーマ = デザイン(演出) + 配色 の組み合わせ。
* を切り替えると、配色と演出がまとめて切り替わる。
* ここでは配色(CSS変数)のみを定義し、演出は /app/style.css 側で [data-theme] ごとに定義する。
*/
[data-theme="hotaru"] {
--bg-1: #1c2334;
--bg-2: #0f141d;
--orb-1: #2b3a5c;
--orb-2: #3a2f56;
--orb-3: #1d4150;
--ink: #e7e9f1;
--sub: #8a93a9;
--accent: #d6bd82;
--sparkle: #fff6dc;
--surface: rgba(255, 255, 255, 0.06);
--line: rgba(255, 255, 255, 0.1);
--glow: rgba(214, 189, 130, 0.3);
--error: #f08a8a;
}
[data-theme="iki"] {
--bg-1: #f5f9fd;
--bg-2: #e5eef8;
--orb-1: #cfe2f6;
--orb-2: #dcecfb;
--orb-3: #dde3f8;
--ink: #3d4f63;
--sub: #8a9db2;
--accent: #5a8fc6;
--surface: rgba(255, 255, 255, 0.62);
--line: rgba(61, 79, 99, 0.12);
--glow: rgba(90, 143, 198, 0.3);
--error: #c4707c;
}
[data-theme="tegami"] {
--bg-1: #fbf9f5;
--bg-2: #f1ece3;
--orb-1: #ece2d0;
--orb-2: #f3ebdd;
--orb-3: #e9e3d8;
--ink: #4b443b;
--sub: #a69c8e;
--accent: #a88f6f;
--surface: rgba(255, 254, 251, 0.8);
--line: rgba(75, 68, 59, 0.12);
--glow: rgba(168, 143, 111, 0.22);
--error: #c0584f;
}
/* テーマ切り替えボタン(名前は出さず、各テーマの地色と差し色で見分ける) */
.theme-switcher {
display: flex;
justify-content: center;
gap: 14px;
padding: 6px 0;
}
.theme-btn {
width: 30px;
height: 30px;
padding: 0;
border-radius: 50%;
border: 1px solid var(--line);
cursor: pointer;
background: radial-gradient(circle, var(--dot) 0 26%, var(--base) 30%);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.theme-btn.is-active {
transform: scale(1.12);
box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 3.5px var(--accent);
}