/* Vedomie — témy vzhľadu
 * Predvolená „Hlbina" žije v style.css (:root). Každá téma tu len prepisuje
 * tokeny — komponenty sa nemenia, takže prepnutie je okamžité a bez latencie.
 *
 *  papier    — denná · teplý krém, atramentový text, bronz (inšpirácia: editorial line-art)
 *  porcelan  — denná · chladný porcelán, modrosivá, borovicová zeleň
 *  uhlik     — tmavá · teplý grafit, meď a jantár, málo modrého svetla
 *  machovina — tmavá · lesná zem, nefrit a mach
 */

/* ============ PAPIER (denná) ============ */

[data-theme="papier"] {
  --bg: #f0ece3;
  --bg-2: #e9e4d7;
  --surface: #f7f4ed;
  --surface-2: #ece7da;
  --line: #d8d1c0;
  --line-soft: #e2dccc;
  --text: #2f2a22;
  --text-soft: #6e6557;
  --text-faint: #988d7b;
  --accent: #8a6d4e;
  --accent-dim: #b29a7b;
  --accent-2: #b06f3e;
  --danger: #b05246;
  --blue: #56739c;
  --shadow: 0 18px 50px -12px rgba(92, 78, 58, .30);
  --card-shadow: 0 12px 36px -12px rgba(92, 78, 58, .28);

  --heading: #262219;
  --prose: #3b352c;
  --prose-strong: #262219;
  --prose-h: #4a3c28;
  --prose-code: #6d5a40;
  --img-shadow: 0 6px 22px -10px rgba(92, 78, 58, .3);

  --label: #5b5346;
  --label-0: #2f2a22;
  --label-1: #494135;
  --label-deep: #7e7466;
  --label-sel: #211d16;
  --label-stroke: rgba(240, 236, 227, .92);
  --node-stroke: rgba(245, 241, 233, .95);
  --edge-op: .5;
  --edge-op-path: .95;
  --glow-hover: rgba(138, 109, 78, .35);
  --glow-path: rgba(86, 115, 156, .3);
  --glow-sel: rgba(138, 109, 78, .5);
  --glow-good: rgba(138, 109, 78, .85);

  --body-bg:
    radial-gradient(1200px 800px at 70% -10%, #f6f2e9 0%, transparent 60%),
    radial-gradient(900px 700px at -10% 110%, #e9e3d3 0%, transparent 55%),
    var(--bg);
  --topbar-grad: linear-gradient(180deg, rgba(240, 236, 227, .94), rgba(240, 236, 227, .6) 75%, transparent);
  --hintbar-grad: linear-gradient(0deg, rgba(240, 236, 227, .92), transparent);
  --card-grad: linear-gradient(170deg, rgba(251, 248, 241, .97), rgba(244, 240, 231, .97));
  --card-arrow: #f4f0e7;
  --card-arrow-b: #faf7f0;
  --tray-grad: linear-gradient(165deg, rgba(250, 247, 240, .97), rgba(243, 239, 229, .97));
  --sheet-grad: linear-gradient(170deg, #faf7f0, #f2eee3);
  --toast-bg: #fbf8f1;
  --scrim-bg: rgba(64, 56, 44, .42);
  --scroll: #cdc4b0;
  --badge-ink: #fdf9f1;
  --edge-ink: #a8957d;
}

/* ============ SKIN „ATELIER" — editorial line-art štruktúra ============
 * Úplne iná stavba mapy než klasické plné guľôčky:
 *  · centrum galaxie = bronzový disk s tenkým prstencom a bodkou (badge)
 *  · vetvy = krúžky z atramentu s jemne tónovaným papierovým vnútrom
 *  · listy = malé plné atramentové bodky
 *  · spoje = bodkované neutrálne linky; cesta k výberu sa „nakreslí" plnou
 *  · výber = čiarkovaná obežná dráha namiesto žiary (papier nesvieti)
 *  · popisky = serif pre centrá, VERZÁLKY s prestrkom pre hlavné vetvy
 */

[data-skin="atelier"] .guide-ring {
  stroke: var(--line);
  stroke-dasharray: 1 9;
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: .9;
}

/* spoje: bodkovaný atrament, identita farby ostáva v bunkách */
[data-skin="atelier"] .edge {
  stroke: var(--edge-ink);
  stroke-width: 1.6;
  stroke-dasharray: 0.1 6.5;
  stroke-linecap: round;
  opacity: .55;
}
[data-skin="atelier"] .edge.on-path {
  stroke: var(--accent);
  stroke-dasharray: none;
  stroke-width: 1.7;
  opacity: .95;
}

/* bunky: krúžky atramentu na papieri */
[data-skin="atelier"] .node .core {
  fill: color-mix(in srgb, var(--node-color) 16%, var(--surface));
  stroke: var(--node-color);
  stroke-width: 1.6;
}
[data-skin="atelier"] .node[data-depth="2"] .core { stroke-width: 1.4; }
[data-skin="atelier"] .node[data-depth="3"] .core,
[data-skin="atelier"] .node[data-depth="4"] .core,
[data-skin="atelier"] .node[data-depth="5"] .core {
  fill: var(--node-color);
  stroke: var(--bg);
  stroke-width: 1.3;
}

/* centrum galaxie: bronzový disk + badge prstenec s bodkou */
[data-skin="atelier"] .node[data-depth="0"] .core {
  fill: var(--accent);
  stroke: none;
}
[data-skin="atelier"] .node .deco { display: revert; }
[data-skin="atelier"] .deco-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  opacity: .85;
}
[data-skin="atelier"] .deco-dot { fill: var(--accent); }

/* žiadne žiary — papier nesvieti; výber a hover kreslí obežná dráha */
[data-skin="atelier"] .node:hover .core,
[data-skin="atelier"] .node.selected .core,
[data-skin="atelier"] .node.on-path .core { filter: none; }
[data-skin="atelier"] .node.on-path .core { stroke-width: 2; }
[data-skin="atelier"] .node .halo {
  stroke: var(--accent);
  stroke-width: 1.3;
  stroke-dasharray: 2 5;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.82);
  transition: opacity .2s, transform .28s cubic-bezier(.2, .9, .3, 1.35);
}
[data-skin="atelier"] .node:hover .halo { opacity: .4; transform: scale(1); }
[data-skin="atelier"] .node.selected .halo { opacity: 1; transform: scale(1); }

/* due bodka je hlavný „pozri sa sem" signál — na papieri o chlp výraznejšia */
[data-skin="atelier"] .node .due-dot { r: 4px; stroke-width: 1.4; }
[data-skin="atelier"] .node.selected .core { stroke-width: 2.1; }
[data-skin="atelier"] .node.selected[data-depth="3"] .core,
[data-skin="atelier"] .node.selected[data-depth="4"] .core,
[data-skin="atelier"] .node.selected[data-depth="5"] .core { stroke-width: 1.3; }

/* popisky: editorial hierarchia — serif centrum, verzálky hlavných vetiev */
[data-skin="atelier"] .node .label {
  font-size: 12px;
  fill: var(--label);
  stroke-width: 3.5px;
}
[data-skin="atelier"] .node[data-depth="0"] .label {
  font-family: var(--font-read);
  font-size: 19px;
  font-weight: 600;
  fill: var(--heading);
}
[data-skin="atelier"] .node[data-depth="1"] .label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  fill: var(--label-1);
}
[data-skin="atelier"] .node[data-depth="3"] .label,
[data-skin="atelier"] .node[data-depth="4"] .label,
[data-skin="atelier"] .node[data-depth="5"] .label {
  font-size: 10.5px;
  fill: var(--label-deep);
}
[data-skin="atelier"] .node.selected .label { fill: var(--heading); font-weight: 600; }

/* ============ PORCELÁN (denná) ============ */

[data-theme="porcelan"] {
  --bg: #eef1f4;
  --bg-2: #e5eaee;
  --surface: #f7f9fb;
  --surface-2: #e9edf1;
  --line: #d2d9e0;
  --line-soft: #dde3e9;
  --text: #232b34;
  --text-soft: #5d6a77;
  --text-faint: #8b97a3;
  --accent: #34756a;
  --accent-dim: #84aaa2;
  --accent-2: #a8743c;
  --danger: #ab5050;
  --blue: #4d77a8;
  --shadow: 0 18px 50px -12px rgba(44, 58, 72, .25);
  --card-shadow: 0 12px 36px -12px rgba(44, 58, 72, .22);

  --heading: #1d242c;
  --prose: #323b45;
  --prose-strong: #1d242c;
  --prose-h: #2a3a4a;
  --prose-code: #3c6b62;
  --img-shadow: 0 6px 22px -10px rgba(44, 58, 72, .25);

  --label: #4d5a67;
  --label-0: #232b34;
  --label-1: #3b4856;
  --label-deep: #75828e;
  --label-sel: #16202a;
  --label-stroke: rgba(238, 241, 244, .92);
  --node-stroke: rgba(244, 247, 250, .95);
  --edge-op: .45;
  --edge-op-path: .95;
  --glow-hover: rgba(77, 119, 168, .32);
  --glow-path: rgba(77, 119, 168, .28);
  --glow-sel: rgba(52, 117, 106, .45);
  --glow-good: rgba(52, 117, 106, .8);

  --body-bg:
    radial-gradient(1200px 800px at 70% -10%, #f4f7f9 0%, transparent 60%),
    radial-gradient(900px 700px at -10% 110%, #e6ebf0 0%, transparent 55%),
    var(--bg);
  --topbar-grad: linear-gradient(180deg, rgba(238, 241, 244, .94), rgba(238, 241, 244, .6) 75%, transparent);
  --hintbar-grad: linear-gradient(0deg, rgba(238, 241, 244, .92), transparent);
  --card-grad: linear-gradient(170deg, rgba(250, 252, 253, .97), rgba(242, 245, 248, .97));
  --card-arrow: #f2f5f8;
  --card-arrow-b: #f9fbfc;
  --tray-grad: linear-gradient(165deg, rgba(249, 251, 252, .97), rgba(241, 244, 247, .97));
  --sheet-grad: linear-gradient(170deg, #fafcfd, #f0f3f6);
  --toast-bg: #fbfcfd;
  --scrim-bg: rgba(33, 42, 52, .42);
  --scroll: #c2ccd5;
  --badge-ink: #f7fafc;
}

/* ============ TUŠ (denná · skin tus) ============
 * Suchá, uhladená: takmer monochromatický grafit na bledom papieri.
 * Kontrast nesie svetlosť, nie odtieň — bunky sú plné matné disky.
 * Jediný akcent: rumelka technického pera (výber, due, cesta).
 */

[data-theme="tus"] {
  --bg: #f5f5f3;
  --bg-2: #ededea;
  --surface: #fbfbfa;
  --surface-2: #ebebe7;
  --line: #d9d9d3;
  --line-soft: #e4e4df;
  --text: #262622;
  --text-soft: #5f5f58;
  --text-faint: #909087;
  --accent: #c14b32;
  --accent-dim: #cf9181;
  --accent-2: #b9582f;
  --danger: #a8403a;
  --blue: #4a6f94;
  --shadow: 0 18px 50px -12px rgba(60, 60, 52, .22);
  --card-shadow: 0 12px 36px -12px rgba(60, 60, 52, .2);

  --heading: #1d1d1a;
  --prose: #33332e;
  --prose-strong: #1d1d1a;
  --prose-h: #2a2a25;
  --prose-code: #705f4e;
  --img-shadow: 0 6px 22px -10px rgba(60, 60, 52, .22);

  --label: #55554e;
  --label-0: #262622;
  --label-1: #3a3a34;
  --label-deep: #84847b;
  --label-sel: #111110;
  --label-stroke: rgba(245, 245, 243, .92);
  --node-stroke: rgba(245, 245, 243, .95);
  --edge-op: .9;
  --edge-op-path: 1;
  --glow-hover: rgba(38, 38, 34, .25);
  --glow-path: rgba(38, 38, 34, .2);
  --glow-sel: rgba(193, 75, 50, .4);
  --glow-good: rgba(193, 75, 50, .7);

  --body-bg:
    radial-gradient(1200px 800px at 70% -10%, #f9f9f7 0%, transparent 60%),
    radial-gradient(900px 700px at -10% 110%, #f0f0ed 0%, transparent 55%),
    var(--bg);
  --topbar-grad: linear-gradient(180deg, rgba(245, 245, 243, .94), rgba(245, 245, 243, .6) 75%, transparent);
  --hintbar-grad: linear-gradient(0deg, rgba(245, 245, 243, .92), transparent);
  --card-grad: linear-gradient(170deg, rgba(253, 253, 252, .98), rgba(247, 247, 245, .98));
  --card-arrow: #f7f7f5;
  --card-arrow-b: #fcfcfb;
  --tray-grad: linear-gradient(165deg, rgba(252, 252, 251, .98), rgba(246, 246, 244, .98));
  --sheet-grad: linear-gradient(170deg, #fdfdfc, #f6f6f4);
  --toast-bg: #fdfdfc;
  --scrim-bg: rgba(35, 35, 31, .45);
  --scroll: #cfcfc8;
  --badge-ink: #fdf6f3;
  --edge-ink: #c6c6bf;
}

/* Tuš biely — identický s Tušom (zdieľa skin „tus"), len čistejšie biele pozadie #fdfcfc. */
[data-theme="tus-biely"] {
  --bg: #fdfcfc;
  --bg-2: #f3f2f2;
  --surface: #ffffff;
  --surface-2: #f1f0f0;
  --line: #e0dfdd;
  --line-soft: #ecebe9;
  --text: #262622;
  --text-soft: #5f5f58;
  --text-faint: #909087;
  --accent: #c14b32;
  --accent-dim: #cf9181;
  --accent-2: #b9582f;
  --danger: #a8403a;
  --blue: #4a6f94;
  --shadow: 0 18px 50px -12px rgba(60, 60, 52, .2);
  --card-shadow: 0 12px 36px -12px rgba(60, 60, 52, .18);

  --heading: #1d1d1a;
  --prose: #33332e;
  --prose-strong: #1d1d1a;
  --prose-h: #2a2a25;
  --prose-code: #705f4e;
  --img-shadow: 0 6px 22px -10px rgba(60, 60, 52, .2);

  --label: #55554e;
  --label-0: #262622;
  --label-1: #3a3a34;
  --label-deep: #84847b;
  --label-sel: #111110;
  --label-stroke: rgba(253, 252, 252, .92);
  --node-stroke: rgba(253, 252, 252, .95);
  --edge-op: .9;
  --edge-op-path: 1;
  --glow-hover: rgba(38, 38, 34, .25);
  --glow-path: rgba(38, 38, 34, .2);
  --glow-sel: rgba(193, 75, 50, .4);
  --glow-good: rgba(193, 75, 50, .7);

  --body-bg:
    radial-gradient(1200px 800px at 70% -10%, #ffffff 0%, transparent 60%),
    radial-gradient(900px 700px at -10% 110%, #f6f5f5 0%, transparent 55%),
    var(--bg);
  --topbar-grad: linear-gradient(180deg, rgba(253, 252, 252, .94), rgba(253, 252, 252, .6) 75%, transparent);
  --hintbar-grad: linear-gradient(0deg, rgba(253, 252, 252, .92), transparent);
  --card-grad: linear-gradient(170deg, rgba(255, 255, 255, .98), rgba(250, 249, 249, .98));
  --card-arrow: #fafafa;
  --card-arrow-b: #ffffff;
  --tray-grad: linear-gradient(165deg, rgba(255, 255, 255, .98), rgba(249, 248, 248, .98));
  --sheet-grad: linear-gradient(170deg, #ffffff, #f7f6f6);
  --toast-bg: #ffffff;
  --scrim-bg: rgba(35, 35, 31, .45);
  --scroll: #d6d5d2;
  --badge-ink: #fdf6f3;
  --edge-ink: #cdccc6;
}

/* ============ SKIN „TUŠ" — matný grafit, technická kresba ============
 *  · bunky = plné matné disky bez obrysu, hierarchia cez svetlosť
 *  · spoje = rovné tenké šedé vlásočnice; cesta k výberu = plný atrament
 *  · výber = plný rumelkový prstenec (žiadne čiarkovanie, žiadna žiara)
 *  · prstence orbít = súvislé vlásočnice ako rysovací podklad
 *  · popisky = čistý sans, kontrast atramentu
 */

[data-skin="tus"] .guide-ring {
  stroke: var(--line-soft);
  stroke-width: 1;
  stroke-dasharray: none;
  opacity: .55;
}

[data-skin="tus"] .edge {
  stroke: var(--edge-ink);
  stroke-width: 1.2;
  opacity: .9;
}
[data-skin="tus"] .edge.on-path {
  stroke: var(--heading);
  stroke-width: 1.8;
  opacity: 1;
}

[data-skin="tus"] .node .core {
  fill: var(--node-color);
  stroke: none;
}

/* centrum galaxie: atramentový disk s vlásočnicovým dvojkruhom */
[data-skin="tus"] .node .deco { display: revert; }
[data-skin="tus"] .deco-ring {
  fill: none;
  stroke: var(--text-faint);
  stroke-width: 1;
  opacity: .55;
}
[data-skin="tus"] .deco-dot { display: none; }

/* žiadne žiary — výber drží plný rumelkový prstenec */
[data-skin="tus"] .node:hover .core,
[data-skin="tus"] .node.selected .core,
[data-skin="tus"] .node.on-path .core { filter: none; }
[data-skin="tus"] .node .halo {
  stroke: var(--accent);
  stroke-width: 1.6;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.85);
  transition: opacity .18s, transform .22s cubic-bezier(.2, .9, .3, 1.2);
}
[data-skin="tus"] .node:hover .halo { opacity: .3; transform: scale(1); }
[data-skin="tus"] .node.selected .halo { opacity: 1; transform: scale(1); }

[data-skin="tus"] .node .due-dot { r: 4px; fill: var(--accent); stroke-width: 1.5; }

/* popisky: suchý sans, hierarchia váhou a atramentom */
[data-skin="tus"] .node .label { font-size: 12px; fill: var(--label); stroke-width: 3.5px; }
[data-skin="tus"] .node[data-depth="0"] .label {
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: .01em;
  fill: var(--label-0);
}
[data-skin="tus"] .node[data-depth="1"] .label { font-size: 13px; font-weight: 500; fill: var(--label-1); }
[data-skin="tus"] .node[data-depth="3"] .label,
[data-skin="tus"] .node[data-depth="4"] .label,
[data-skin="tus"] .node[data-depth="5"] .label { font-size: 11px; fill: var(--label-deep); }
[data-skin="tus"] .node.selected .label { fill: var(--label-sel); font-weight: 600; }

/* ============ UHLÍK (tmavá) ============ */

[data-theme="uhlik"] {
  --bg: #161210;
  --bg-2: #1b1613;
  --surface: #211b16;
  --surface-2: #281f18;
  --line: #372c20;
  --line-soft: #2b2218;
  --text: #e9ded0;
  --text-soft: #a8998a;
  --text-faint: #786a5b;
  --accent: #dca964;
  --accent-dim: #8a6a3e;
  --accent-2: #cf8456;
  --danger: #d98a7a;
  --blue: #95aecd;
  --shadow: 0 18px 50px -12px rgba(0, 0, 0, .65);
  --card-shadow: 0 12px 36px -12px rgba(0, 0, 0, .65);

  --heading: #f1e7d8;
  --prose: #d3c6b5;
  --prose-strong: #ecdfcd;
  --prose-h: #e4d6c2;
  --prose-code: #d4b88a;
  --img-shadow: 0 6px 22px -10px rgba(0, 0, 0, .6);

  --label: #c0b09c;
  --label-0: #ecdfcd;
  --label-1: #d6c7b3;
  --label-deep: #94856f;
  --label-sel: #f6ecdc;
  --label-stroke: rgba(18, 14, 11, .9);
  --node-stroke: rgba(20, 16, 13, .85);
  --edge-op: .3;
  --edge-op-path: .85;
  --glow-hover: rgba(220, 169, 100, .35);
  --glow-path: rgba(200, 160, 110, .3);
  --glow-sel: rgba(220, 169, 100, .55);
  --glow-good: rgba(220, 169, 100, .95);

  --body-bg:
    radial-gradient(1200px 800px at 70% -10%, #1e1813 0%, transparent 60%),
    radial-gradient(900px 700px at -10% 110%, #1a1410 0%, transparent 55%),
    var(--bg);
  --topbar-grad: linear-gradient(180deg, rgba(22, 18, 16, .92), rgba(22, 18, 16, .55) 75%, transparent);
  --hintbar-grad: linear-gradient(0deg, rgba(22, 18, 16, .9), transparent);
  --card-grad: linear-gradient(170deg, rgba(40, 32, 25, .97), rgba(30, 24, 19, .97));
  --card-arrow: #1e1813;
  --card-arrow-b: #282019;
  --tray-grad: linear-gradient(165deg, rgba(34, 27, 21, .97), rgba(26, 21, 16, .97));
  --sheet-grad: linear-gradient(170deg, #251e17, #1d1712);
  --toast-bg: #2a221a;
  --scrim-bg: rgba(10, 7, 5, .7);
  --scroll: #3e3225;
  --badge-ink: #211505;
}

/* ============ MACHOVINA (tmavá) ============ */

[data-theme="machovina"] {
  --bg: #0d120e;
  --bg-2: #111812;
  --surface: #151d16;
  --surface-2: #1a231b;
  --line: #253224;
  --line-soft: #1d281e;
  --text: #d9e3d4;
  --text-soft: #93a48e;
  --text-faint: #66775f;
  --accent: #7ec99a;
  --accent-dim: #45755a;
  --accent-2: #d4b06a;
  --danger: #d68b80;
  --blue: #7fa8c9;
  --shadow: 0 18px 50px -12px rgba(0, 0, 0, .65);
  --card-shadow: 0 12px 36px -12px rgba(0, 0, 0, .65);

  --heading: #e7f0e2;
  --prose: #c4d2bd;
  --prose-strong: #dfe9d8;
  --prose-h: #d4e2cc;
  --prose-code: #a3cfa6;
  --img-shadow: 0 6px 22px -10px rgba(0, 0, 0, .6);

  --label: #a9bba2;
  --label-0: #dbe7d4;
  --label-1: #c4d4bc;
  --label-deep: #87987f;
  --label-sel: #eef6e8;
  --label-stroke: rgba(10, 14, 10, .9);
  --node-stroke: rgba(11, 15, 11, .85);
  --edge-op: .3;
  --edge-op-path: .85;
  --glow-hover: rgba(126, 201, 154, .32);
  --glow-path: rgba(127, 168, 201, .3);
  --glow-sel: rgba(126, 201, 154, .55);
  --glow-good: rgba(126, 201, 154, .95);

  --body-bg:
    radial-gradient(1200px 800px at 70% -10%, #121a13 0%, transparent 60%),
    radial-gradient(900px 700px at -10% 110%, #101710 0%, transparent 55%),
    var(--bg);
  --topbar-grad: linear-gradient(180deg, rgba(13, 18, 14, .92), rgba(13, 18, 14, .55) 75%, transparent);
  --hintbar-grad: linear-gradient(0deg, rgba(13, 18, 14, .9), transparent);
  --card-grad: linear-gradient(170deg, rgba(25, 34, 26, .97), rgba(18, 26, 19, .97));
  --card-arrow: #121a13;
  --card-arrow-b: #19231a;
  --tray-grad: linear-gradient(165deg, rgba(21, 29, 22, .97), rgba(16, 23, 17, .97));
  --sheet-grad: linear-gradient(170deg, #172018, #121a13);
  --toast-bg: #1b2519;
  --scrim-bg: rgba(4, 8, 5, .7);
  --scroll: #2b3a2b;
  --badge-ink: #161c0a;
}