/* Dark mode, modeled on each tool's own dark theme. Active when <html data-mode="dark">
   (set before first paint from the "화면 모드" choice: auto follows the OS). Figma is always dark, so it has no entry.
   Selectors carry [data-mode] on top of the skin selector, so they win over skin and page styles regardless of load order. */

/* ======================= GitHub (Dark default) ======================= */
html[data-mode="dark"][data-skin="github"] {
  --bg: #0d1117; --fg: #f0f6fc; --muted: #9198a1; --line: #3d444d; --subtle: #151b23;
  --accent: #4493f8; --good: #3fb950; --bad: #f85149; --focus: #1f6feb; --green-btn: #238636;
  color-scheme: dark;
}
[data-mode="dark"][data-skin="github"] .app-top { background: #010409; }
[data-mode="dark"][data-skin="github"] .gh-mark { color: #f0f6fc; --logo-fg: #0d1117; }
[data-mode="dark"][data-skin="github"] .gh-tabs .on { border-bottom-color: #f78166; }
[data-mode="dark"][data-skin="github"] .gh-repoav { background: rgba(56, 139, 253, .15); color: #4493f8; }
[data-mode="dark"][data-skin="github"] .gh-btn.primary, [data-mode="dark"][data-skin="github"] .btn.primary { border-color: rgba(240, 246, 252, .1); }
[data-mode="dark"][data-skin="github"] .btn:hover { background: #262c36; }
[data-mode="dark"][data-skin="github"] .btn.primary:hover { background: #29903b; }
[data-mode="dark"][data-skin="github"] .entry.solo { border-color: #9e6a03; }
[data-mode="dark"][data-skin="github"] .entry.solo .entry-head { background: #272115; border-bottom-color: #9e6a03; }
[data-mode="dark"][data-skin="github"] .entry.solo::after { background: #272115; border-color: #9e6a03; }
[data-mode="dark"][data-skin="github"] .lbl.l1 { background: rgba(56, 139, 253, .15); color: #4493f8; }
[data-mode="dark"][data-skin="github"] .lbl.l2 { background: rgba(171, 125, 248, .15); color: #ab7df8; }
[data-mode="dark"][data-skin="github"] .lbl.l3 { background: rgba(46, 160, 67, .15); color: #3fb950; }
[data-mode="dark"][data-skin="github"] .lbl.l4 { background: rgba(219, 109, 40, .15); color: #db6d28; }
/* 2048 as the dark contribution graph */
[data-mode="dark"][data-skin="github"] .game {
  --cell-bg: #151b23;
  --t2-bg: #0e4429; --t2-fg: #aff5b4; --t4-bg: #006d32; --t4-fg: #fff; --t8-bg: #26a641; --t8-fg: #fff;
  --t16-bg: #39d353; --t16-fg: #0d1117; --t32-bg: #56d364; --t32-fg: #0d1117; --t64-bg: #1f6feb; --t64-fg: #fff;
  --t128-bg: #8957e5; --t128-fg: #fff; --t256-bg: #db61a2; --t256-fg: #fff; --t512-bg: #db6d28; --t512-fg: #fff;
  --t1024-bg: #da3633; --t1024-fg: #fff; --t2048-bg: #f0f6fc; --t2048-fg: #0d1117;
}
[data-mode="dark"][data-skin="github"] .legend i { outline-color: rgba(240, 246, 252, .06); }

/* ======================= Jira (dark theme) ======================= */
html[data-mode="dark"][data-skin="jira"] {
  --bg: #1d2125; --fg: #b6c2cf; --muted: #8c9bab; --subtle-fg: #9fadbc; --line: rgba(166, 197, 226, .16); --subtle: #161a1d;
  --accent: #579dff; --good: #7ee2b8; --bad: #f87168; --focus: #85b8ff;
  --sunken: #161a1d; --sel: #1c2b41;
  color-scheme: dark;
}
[data-mode="dark"][data-skin="jira"] .jr-search { border-color: #738496; }
[data-mode="dark"][data-skin="jira"] .jr-create,
[data-mode="dark"][data-skin="jira"] .jr-status,
[data-mode="dark"][data-skin="jira"] .btn.primary,
[data-mode="dark"][data-skin="jira"] .nt-new { color: #1d2125; }
[data-mode="dark"][data-skin="jira"] .jr-avatars i { border-color: #1d2125; }
[data-mode="dark"][data-skin="jira"] .jr-card { background: #22272b; box-shadow: 0 1px 1px rgba(3, 4, 4, .5), 0 0 1px rgba(3, 4, 4, .5); }
[data-mode="dark"][data-skin="jira"] a.jr-card:hover { background: #282e33; }
[data-mode="dark"][data-skin="jira"] .jr-epic.purple { background: #352c63; color: #b8acf6; }
[data-mode="dark"][data-skin="jira"] .jr-epic.teal { background: #164555; color: #9dd9ee; }
[data-mode="dark"][data-skin="jira"] .jr-epic.orange { background: #5f3811; color: #fec195; }
[data-mode="dark"][data-skin="jira"] .entry-score { background: #164b35; color: #7ee2b8; }
[data-mode="dark"][data-skin="jira"] .entry.solo .entry-score { background: #533f04; color: #f8e6a0; }
[data-mode="dark"][data-skin="jira"] .btn { background: rgba(161, 189, 217, .08); color: var(--subtle-fg); }
[data-mode="dark"][data-skin="jira"] .btn:hover { background: rgba(166, 197, 226, .16); }
[data-mode="dark"][data-skin="jira"] .btn.primary { background: var(--accent); }
[data-mode="dark"][data-skin="jira"] .btn.primary:hover { background: #85b8ff; }
[data-mode="dark"][data-skin="jira"] .jr-btn { background: rgba(161, 189, 217, .08); }
[data-mode="dark"][data-skin="jira"] .board {
  --board-bg: var(--sunken); --cell-bg: rgba(161, 189, 217, .08);
  --t2-bg: #1c2b41; --t2-fg: #85b8ff; --t4-bg: #09326c; --t4-fg: #cce0ff; --t8-bg: #0055cc; --t8-fg: #fff;
  --t16-bg: #0c66e4; --t16-fg: #fff; --t32-bg: #579dff; --t32-fg: #1d2125; --t64-bg: #164b35; --t64-fg: #7ee2b8;
  --t128-bg: #216e4e; --t128-fg: #baf3db; --t256-bg: #2abb7f; --t256-fg: #1d2125; --t512-bg: #533f04; --t512-fg: #f8e6a0;
  --t1024-bg: #7f5f01; --t1024-fg: #f8e6a0; --t2048-bg: #f87168; --t2048-fg: #1d2125;
}

/* ======================= Notion (dark) ======================= */
html[data-mode="dark"][data-skin="notion"] {
  --bg: #191919; --fg: #d4d4d4; --muted: #9b9b9b; --faint: #7f7f7f; --line: rgba(255, 255, 255, .094); --subtle: #202020;
  --hover: rgba(255, 255, 255, .055); --accent: #2383e2; --good: #4dab9a; --bad: #ff7369; --focus: #2383e2;
  --callout: #252525;
  color-scheme: dark;
}
[data-mode="dark"][data-skin="notion"] .nt-sideitem, [data-mode="dark"][data-skin="notion"] .nt-page { color: #9b9b9b; }
[data-mode="dark"][data-skin="notion"] .nt-page.on { background: rgba(255, 255, 255, .08); color: var(--fg); }
[data-mode="dark"][data-skin="notion"] kbd, [data-mode="dark"][data-skin="notion"] .cd-input { background: rgba(135, 131, 120, .15); color: #ff7369; }
[data-mode="dark"][data-skin="notion"] .nt-td.name a span { border-bottom-color: rgba(255, 255, 255, .25); }
[data-mode="dark"][data-skin="notion"] .nt-tr:not(.head):not(.add):hover { background: rgba(255, 255, 255, .03); }
[data-mode="dark"][data-skin="notion"] .nt-status { background: #373737; color: rgba(255, 255, 255, .81); }
[data-mode="dark"][data-skin="notion"] .nt-status i { background: #7f7f7f; }
[data-mode="dark"][data-skin="notion"] .nt-status.live { background: #2b593f; } [data-mode="dark"][data-skin="notion"] .nt-status.live i { background: #4dab9a; }
[data-mode="dark"][data-skin="notion"] .nt-status.wip { background: #28456c; } [data-mode="dark"][data-skin="notion"] .nt-status.wip i { background: #529cca; }
[data-mode="dark"][data-skin="notion"] .nt-tag,
[data-mode="dark"][data-skin="notion"] .lbl,
[data-mode="dark"][data-skin="notion"] .entry-score { color: rgba(255, 255, 255, .81); }
[data-mode="dark"][data-skin="notion"] .nt-tag.purple, [data-mode="dark"][data-skin="notion"] .lbl.l2 { background: #492f64; }
[data-mode="dark"][data-skin="notion"] .nt-tag.blue, [data-mode="dark"][data-skin="notion"] .lbl.l1 { background: #28456c; }
[data-mode="dark"][data-skin="notion"] .nt-tag.orange, [data-mode="dark"][data-skin="notion"] .lbl.l4 { background: #854c1d; }
[data-mode="dark"][data-skin="notion"] .lbl.l3, [data-mode="dark"][data-skin="notion"] .entry-score { background: #2b593f; }
[data-mode="dark"][data-skin="notion"] .entry.solo { background: #2f2a1b; }
[data-mode="dark"][data-skin="notion"] .chip { background: rgba(255, 255, 255, .06); }
[data-mode="dark"][data-skin="notion"] .composer .name-input { background: #202020; }
[data-mode="dark"][data-skin="notion"] .btn { border-color: rgba(255, 255, 255, .13); }
[data-mode="dark"][data-skin="notion"] .chat-card, [data-mode="dark"][data-skin="notion"] .chat-room { border-color: rgba(255, 255, 255, .13); }
[data-mode="dark"][data-skin="notion"] .board {
  --board-bg: var(--bg); --cell-bg: rgba(255, 255, 255, .04);
  --t2-bg: #373737; --t2-fg: #e6e6e6; --t4-bg: #603b2c; --t4-fg: #f0dfd6; --t8-bg: #854c1d; --t8-fg: #fbe3cf;
  --t16-bg: #89632a; --t16-fg: #fbefcf; --t32-bg: #2b593f; --t32-fg: #d7f0e0; --t64-bg: #28456c; --t64-fg: #d3e8f8;
  --t128-bg: #492f64; --t128-fg: #e8d9f5; --t256-bg: #69314c; --t256-fg: #f6d9e6; --t512-bg: #6e3630; --t512-fg: #ffd9d4;
  --t1024-bg: #d4d4d4; --t1024-fg: #191919; --t2048-bg: #2383e2; --t2048-fg: #fff;
}

/* ======================= shared pieces outside the skins ======================= */
[data-mode="dark"]:not([data-skin="figma"]) .skin-menu { background: var(--bg); color: var(--fg); border-color: var(--line); box-shadow: 0 10px 28px rgba(0, 0, 0, .5); }
[data-mode="dark"]:not([data-skin="figma"]) .skin-menu button:hover,
[data-mode="dark"]:not([data-skin="figma"]) .skin-menu button:focus-visible { background: var(--subtle); }
[data-mode="dark"]:not([data-skin="figma"]) .skin-menu .sm-title { color: var(--muted); }
[data-mode="dark"]:not([data-skin="figma"]) .sm-sep { background: var(--line); }
[data-mode="dark"]:not([data-skin="figma"]) .sm-swatch { border-color: var(--line); }
[data-mode="dark"]:not([data-skin="figma"]) .sm-swatch.sm-icon { background: var(--subtle); }
[data-mode="dark"] .fb-btn { box-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
[data-mode="dark"] .toast { background: #f0f0f0; color: #111; }
[data-mode="dark"][data-skin="jira"] .jr-epic.green { background: #164b35; color: #7ee2b8; }
[data-mode="dark"][data-skin="notion"] .nt-tag.green { background: #2b593f; }