/* ─────────────────────────────────────────────────────────────
   LIGHT-TONE BASE — shared by every light skin (Rising Sun, Fantasy, Comedy…).
   Active when <html data-tone="light">. Each light skin sets its own color
   tokens; this file only swaps the base theme's hard-coded dark surfaces.
   ───────────────────────────────────────────────────────────── */
[data-tone="light"] { color-scheme: light; }
[data-tone="light"] body { background: var(--bg); }
[data-tone="light"] .grain { display: none; }
[data-tone="light"] .btn { background: var(--panel); border: 1.5px solid var(--line2); }
[data-tone="light"] .btn.primary { background: var(--red); border-color: var(--deep); color: #fff; }
[data-tone="light"] .btn.amber { background: var(--text); border-color: var(--text); color: var(--panel); }
[data-tone="light"] .btn.ghost { background: transparent; }
[data-tone="light"] .input, [data-tone="light"] select.input, [data-tone="light"] .segb, [data-tone="light"] .toggle { background: #fff; border: 1.5px solid var(--line2); color: var(--text); }
[data-tone="light"] .input:focus { border-color: var(--red); }
[data-tone="light"] .segb.on { background: var(--text); color: var(--panel); border-color: var(--text); }
[data-tone="light"] .switch { background: var(--line2); }
[data-tone="light"] .pause-btn { color: var(--red); border-color: var(--red); }
[data-tone="light"] .marquee::before { display: none; }
[data-tone="light"] .card-panel { background: var(--panel); border: 1px solid var(--line); }
[data-tone="light"] .topbar { background: var(--panel); border-bottom: 2px solid var(--line2); }
[data-tone="light"] .code-chip { background: var(--red); color: #fff; border: 0; }
[data-tone="light"] .phase-pill { color: var(--red); }
[data-tone="light"] .movie-strip { background: var(--panel); color: var(--bone); }
[data-tone="light"] .ms-clock { color: var(--red); }
[data-tone="light"] .ms-bar { background: #0000000f; }
[data-tone="light"] .tabbar { background: var(--panel); border-top: 1px solid var(--line); }
[data-tone="light"] .tab.on { background: var(--bg); box-shadow: inset 0 -3px 0 var(--red); }
[data-tone="light"] .banner, [data-tone="light"] .banner.amber, [data-tone="light"] .banner.green { background: var(--panel); border: 1px solid var(--line); border-left: 6px solid var(--red); }
[data-tone="light"] .banner.green { border-left-color: var(--green); }
[data-tone="light"] .method.mine { background: var(--panel); border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
[data-tone="light"] .tcard { background: var(--panel); box-shadow: 0 8px 20px -14px #0006; }
[data-tone="light"] .tcard::after { border-top: 1px solid #00000012; }
[data-tone="light"] .tcard .mod { color: var(--deep); background: #0000000a; border-left-color: var(--red); }
[data-tone="light"] .tcard .pick { background: #0000000a; }
[data-tone="light"] .tcard.hit { background: #eef7ef; border-color: var(--green); }
[data-tone="light"] .tcard .call { background: var(--red); border: 0; color: #fff; }
[data-tone="light"] .tcard .call.name { background: var(--text); color: var(--panel); }
[data-tone="light"] .stamp { background: #ffffffd9; }
[data-tone="light"] .tag { background: #0000000c; color: var(--bone); }
[data-tone="light"] .tag.blind { background: #1d4ed81a; color: #1d4ed8; }
[data-tone="light"] .tag.mod { background: #0000000f; color: var(--red); }
[data-tone="light"] .tag.rev { background: #0000000f; color: var(--deep); }
[data-tone="light"] .tcard .val .up-blind { color: #1d4ed8; } [data-tone="light"] .tcard .val .up-mod { color: var(--red); } [data-tone="light"] .tcard .val .up-rev { color: var(--deep); }
[data-tone="light"] .pickbar { background: #fff6e0; border-color: #c9a24a; }
[data-tone="light"] .pill { background: #0000000c; }
[data-tone="light"] .pill.host { background: #0000000f; color: var(--red); }
[data-tone="light"] .pill.loser { background: #0000000f; color: var(--deep); }
[data-tone="light"] .msg.sys { background: #0000000a; }
[data-tone="light"] .msg.hit { color: #14603f; background: #1f8a5b14; }
[data-tone="light"] .msg.revenge { color: var(--deep); background: #0000000c; }
[data-tone="light"] .reacts button { background: #0000000a; }
[data-tone="light"] .claim { background: var(--panel); border: 2px solid var(--text); }
[data-tone="light"] .claim .bar { background: #0000001a; }
[data-tone="light"] .claim .bar i { background: var(--red); }
[data-tone="light"] .act.red { background: var(--panel); border-color: var(--red); }
[data-tone="light"] .preq { border-color: var(--red); }
[data-tone="light"] .preq-ico { background: var(--red); color: #fff; }
[data-tone="light"] #toast div { background: var(--text); color: var(--panel); border: 0; }
[data-tone="light"] .fx-pts { color: var(--text); }
[data-tone="light"] .fx-sub { color: var(--text); }
[data-tone="light"] .leader { background: #fff; }