/* ════════════════════════════════════════════════════════════════════
   NYXIUM · BAREVNÉ MOTIVY
   Jen paleta, nic jiného. Aplikace s vlastním vzhledem (Docs, Music, AI,
   Simulace) si ji můžou vzít bez celého Fluent skinu z explorer.css —
   ten tytéž proměnné definuje sám, takže se nikde nenačítají obě.
   Hodnoty drží /nyx-barvy.js a jsou uložené u účtu.
   ════════════════════════════════════════════════════════════════════ */
:root{
  --acc:#60ccfe; --acc-hi:#98ecfe; --acc-lo:#0093f9; --acc-deep:#0078d4;
  --acc-soft:rgba(96,204,254,.14); --acc-rgb:96,204,254;
}

html[data-theme="blue"], html:not([data-theme]){
  --acc:#60ccfe; --acc-hi:#98ecfe; --acc-lo:#0093f9; --acc-deep:#0078d4; --acc-rgb:96,204,254;
}
html[data-theme="teal"]{
  --acc:#4fd9c8; --acc-hi:#7ee6d9; --acc-lo:#2fb5a5; --acc-deep:#038387; --acc-rgb:79,217,200;
}
html[data-theme="purple"]{
  --acc:#b69bff; --acc-hi:#cdbcff; --acc-lo:#9277e0; --acc-deep:#8764b8; --acc-rgb:182,155,255;
}
html[data-theme="rose"]{
  --acc:#ff8fa6; --acc-hi:#ffb1c1; --acc-lo:#e26a83; --acc-deep:#c42b1c; --acc-rgb:255,143,166;
}
html[data-theme="green"]{
  --acc:#6ccb5f; --acc-hi:#93dc88; --acc-lo:#4fa844; --acc-deep:#107c10; --acc-rgb:108,203,95;
}
html[data-theme="red"]{
  --acc:#ff7a68; --acc-hi:#ffa295; --acc-lo:#e15a48; --acc-deep:#d13438; --acc-rgb:255,122,104;
}

html[data-mode="light"][data-theme="blue"], html[data-mode="light"]:not([data-theme]){
  --acc:#005a9e; --acc-hi:#0078d4; --acc-lo:#004578; --acc-deep:#0078d4; --acc-rgb:0,120,212;
}
html[data-mode="light"][data-theme="teal"]{
  --acc:#026d70; --acc-hi:#038387; --acc-lo:#01595b; --acc-deep:#038387; --acc-rgb:3,131,135;
}
html[data-mode="light"][data-theme="purple"]{
  --acc:#6f4f9c; --acc-hi:#8764b8; --acc-lo:#573d7c; --acc-deep:#8764b8; --acc-rgb:135,100,184;
}
html[data-mode="light"][data-theme="rose"]{
  --acc:#a32316; --acc-hi:#c42b1c; --acc-lo:#821c11; --acc-deep:#c42b1c; --acc-rgb:196,43,28;
}
html[data-mode="light"][data-theme="green"]{
  --acc:#0d630d; --acc-hi:#107c10; --acc-lo:#0a4f0a; --acc-deep:#107c10; --acc-rgb:16,124,16;
}
html[data-mode="light"][data-theme="red"]{
  --acc:#a4262c; --acc-hi:#d13438; --acc-lo:#7c1c21; --acc-deep:#d13438; --acc-rgb:164,38,44;
}

/* ── výběr barvy v lištičce ───────────────────────────────────────────
   Tvar i chování drží /nyx-barvy.js, styly k tomu má jinak jen
   explorer.css — aplikace bez Fluent sady (Docs, Music) by měly
   rozbalovátko nenastylované, tedy natlačené do lišty. Barvy se proto
   míchají z `currentColor` a šedé, aby seděly na světlém i tmavém. */
.theme-picker { position: relative; }

.theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: inherit; opacity: .75; cursor: pointer;
  transition: background-color .12s, opacity .12s;
}
.theme-btn:hover, .theme-btn.open { background: rgba(128, 128, 128, .18); opacity: 1; }
.theme-btn svg { width: 18px; height: 18px; display: block; }

.theme-pop {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 300;
  min-width: 176px; padding: 4px;
  border: 1px solid rgba(128, 128, 128, .3); border-radius: 8px;
  background: var(--nyx-pop-bg, #202020);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .34);
}
.theme-pop.open { display: block; }

.theme-opt {
  display: flex; align-items: center; gap: 10px;
  height: 32px; padding: 0 10px; margin: 1px 0;
  border-radius: 5px; font-size: 13px; color: inherit; cursor: pointer;
}
.theme-opt:hover { background: rgba(128, 128, 128, .18); }
.theme-opt.sel { background: rgba(128, 128, 128, .13); position: relative; }
.theme-opt.sel::before {
  content: ''; position: absolute; left: 2px; top: 50%; translate: 0 -50%;
  width: 3px; height: 16px; border-radius: 2px; background: var(--acc);
}
.theme-dot {
  width: 16px; height: 16px; border-radius: 50%; flex: 0 0 16px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3);
}

/* Druhá osa — vzorník zvýraznění pod motivy.
   `.theme-hlava` a `.theme-cara` nesou stejné hodnoty jako `.ctx-hdr`
   a `.ctx-sep` z explorer.css, aby bylo jedno, která sada vyhraje. */
.theme-hlava { padding: 6px 10px 4px; font-size: 11.5px; font-weight: 600; opacity: .62; }
.theme-cara { height: 1px; margin: 5px 8px; border: 0; background: rgba(128, 128, 128, .26); }

.theme-akcenty { display: grid; grid-template-columns: repeat(7, 27px); gap: 2px; padding: 1px 5px 5px; }
.theme-akcent {
  width: 27px; height: 27px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 6px;
  background: none; color: inherit; cursor: pointer;
}
.theme-akcent:hover { background: rgba(128, 128, 128, .2); }
/* Rámeček v barvě akcentu by u právě zvoleného vzorku splynul s ním samým,
   proto se bere barva textu — ta kontrastuje na světlém i tmavém. */
.theme-akcent.je { border-color: currentColor; background: rgba(128, 128, 128, .22); }
.theme-akcent .theme-dot { width: 17px; height: 17px; flex: none; }

/* Systémový výběr barvy se otevře kliknutím na duhové kolečko —
   samotné pole leží přes něj prūhledně. */
.theme-vlastni { position: relative; overflow: hidden; }
.theme-vlastni input[type="color"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer;
}

html[data-mode="light"] .theme-pop { --nyx-pop-bg: #f7f7f7; }