/* TheOldOne — 3 vizuály × dark/light · iskry vždy #f61900 */

:root {
  --red: #f61900;
  --particle-color: #f61900;
  --particle-glow: rgba(246, 25, 0, 0.85);
  --particle-glow-soft: rgba(246, 25, 0, 0.35);
  --particle-shape: 50%;
  --particle-w: 4px;
  --particle-h: 4px;
  --particle-count: 28;

  --bg: hsl(120, 8%, 5%);
  --fg: #fff;
  --heading-color: var(--fg);
  --links: #5dff8a;
  --sidebar-active: #5dff8a;
  --terminal-color: #3fb950;
  --accent-glitch: #3fb950;
  --accent-secondary: var(--links);
  --hover-accent: var(--links);
  --card-hover-border: var(--links);
  --table-border-color: rgba(63, 185, 80, 0.14);
  --menu-bar-link-color: #aaa;
  --menu-bar-link-color-hover: #fff;
  --inline-code-color: #9fdfb0;
  --bg-effect-primary: rgba(63, 185, 80, 0.09);
  --bg-effect-secondary: rgba(63, 185, 80, 0.04);
  --grid-overlay-color: rgba(63, 185, 80, 0.035);
  --grid-size: 50px;
  --red-ui: transparent;
  --red-border: transparent;
  --menu-border-red: transparent;
  --pill-border: var(--links);
  --alert-tip-bg: rgba(63, 185, 80, 0.08);
  --alert-tip-border: #3fb950;
  --alert-tip-title: #5dff8a;
  --menu-bg: color-mix(in srgb, var(--bg) 76%, transparent);
  --card-bg: color-mix(in srgb, var(--bg) 48%, transparent);
  --skill-gradient-end: var(--terminal-color);
  --glitch-border-style: solid;
  --brand-handle-color: var(--links);
}

/* ── MINIMAL (phosphor-r1) dark ── */
[data-visual="minimal"][data-mode="dark"] {
  --bg: hsl(120, 8%, 5%);
  --links: #5dff8a;
  --sidebar-active: #5dff8a;
  --terminal-color: #3fb950;
  --accent-glitch: #3fb950;
  --table-border-color: rgba(63, 185, 80, 0.14);
  --bg-effect-primary: rgba(63, 185, 80, 0.09);
  --grid-overlay-color: rgba(63, 185, 80, 0.035);
}

/* MINIMAL light */
[data-visual="minimal"][data-mode="light"] {
  --bg: hsl(120, 25%, 96%);
  --fg: hsl(120, 25%, 12%);
  --heading-color: hsl(120, 30%, 10%);
  --links: hsl(142, 55%, 28%);
  --sidebar-active: hsl(142, 55%, 28%);
  --terminal-color: hsl(142, 50%, 26%);
  --accent-glitch: hsl(142, 50%, 30%);
  --hover-accent: hsl(142, 55%, 28%);
  --card-hover-border: var(--red);
  --table-border-color: rgba(63, 120, 80, 0.18);
  --menu-bar-link-color: hsl(120, 10%, 40%);
  --menu-bar-link-color-hover: hsl(120, 30%, 10%);
  --inline-code-color: hsl(142, 40%, 25%);
  --bg-effect-primary: rgba(63, 185, 80, 0.12);
  --bg-effect-secondary: rgba(246, 25, 0, 0.04);
  --grid-overlay-color: rgba(246, 25, 0, 0.045);
  --alert-tip-bg: rgba(63, 185, 80, 0.1);
  --alert-tip-border: hsl(142, 45%, 35%);
  --alert-tip-title: hsl(142, 50%, 28%);
  --menu-bg: color-mix(in srgb, var(--bg) 88%, transparent);
  --card-bg: rgba(255, 255, 255, 0.65);
  --particle-glow-soft: rgba(246, 25, 0, 0.25);
}

/* ── CLASSIC (signal-r2) dark ── */
[data-visual="classic"][data-mode="dark"] {
  --bg: #000;
  --fg: rgba(255, 255, 255, 0.55);
  --heading-color: rgba(220, 220, 0, 0.75);
  --links: rgba(220, 220, 0, 0.8);
  --sidebar-active: #f61900;
  --terminal-color: rgba(220, 220, 0, 0.85);
  --accent-glitch: #f61900;
  --hover-accent: #f61900;
  --card-hover-border: #f61900;
  --red-border: rgba(246, 25, 0, 0.35);
  --table-border-color: rgba(255, 255, 255, 0.12);
  --menu-border-red: rgba(246, 25, 0, 0.3);
  --bg-effect-primary: rgba(220, 220, 0, 0.03);
  --bg-effect-secondary: rgba(246, 25, 0, 0.05);
  --grid-overlay-color: rgba(220, 220, 0, 0.02);
  --glitch-border-style: dashed;
  --particle-shape: 0%;
  --particle-w: 2px;
  --particle-h: 9px;
  --particle-count: 24;
  --inline-code-color: rgba(220, 220, 0, 0.65);
  --brand-handle-color: rgba(220, 220, 0, 0.85);
}

/* CLASSIC light */
[data-visual="classic"][data-mode="light"] {
  --bg: #fffef8;
  --fg: rgba(30, 28, 10, 0.72);
  --heading-color: #8a8200;
  --links: #7a7200;
  --sidebar-active: #c41400;
  --terminal-color: #6b6400;
  --accent-glitch: #d41800;
  --hover-accent: #c41400;
  --card-hover-border: #c41400;
  --red-border: rgba(196, 20, 0, 0.28);
  --table-border-color: rgba(120, 110, 0, 0.15);
  --menu-border-red: rgba(196, 20, 0, 0.2);
  --menu-bar-link-color: rgba(60, 55, 10, 0.55);
  --menu-bar-link-color-hover: #3a3500;
  --inline-code-color: #6b6400;
  --bg-effect-primary: rgba(220, 200, 0, 0.08);
  --bg-effect-secondary: rgba(246, 25, 0, 0.05);
  --grid-overlay-color: rgba(196, 20, 0, 0.04);
  --glitch-border-style: dashed;
  --particle-shape: 0%;
  --particle-w: 2px;
  --particle-h: 9px;
  --particle-count: 22;
  --alert-tip-bg: rgba(246, 25, 0, 0.06);
  --alert-tip-border: #c41400;
  --alert-tip-title: #a81200;
  --menu-bg: color-mix(in srgb, #fffef8 90%, transparent);
  --card-bg: rgba(255, 255, 250, 0.85);
  --particle-glow-soft: rgba(196, 20, 0, 0.22);
  --brand-handle-color: #7a7200;
}

/* ── DUAL (phosphor-r3) dark ── */
[data-visual="dual"][data-mode="dark"] {
  --bg: hsl(120, 5%, 4%);
  --links: #5dff8a;
  --sidebar-active: #5dff8a;
  --terminal-color: #3fb950;
  --accent-glitch: #f61900;
  --accent-secondary: #f61900;
  --hover-accent: #f61900;
  --card-hover-border: #f61900;
  --red-border: rgba(246, 25, 0, 0.4);
  --pill-border: #f61900;
  --alert-tip-border: #f61900;
  --alert-tip-title: #ff6b4a;
  --alert-tip-bg: rgba(246, 25, 0, 0.07);
  --bg-effect-secondary: rgba(246, 25, 0, 0.08);
  --table-border-color: rgba(63, 185, 80, 0.12);
  --brand-handle-color: #5dff8a;
}

/* DUAL light */
[data-visual="dual"][data-mode="light"] {
  --bg: hsl(120, 18%, 95%);
  --fg: hsl(120, 20%, 14%);
  --heading-color: hsl(120, 25%, 10%);
  --links: hsl(142, 50%, 28%);
  --sidebar-active: hsl(142, 50%, 28%);
  --terminal-color: hsl(142, 48%, 26%);
  --accent-glitch: #d41800;
  --accent-secondary: #c41400;
  --hover-accent: #c41400;
  --card-hover-border: #c41400;
  --red-border: rgba(196, 20, 0, 0.3);
  --pill-border: #c41400;
  --alert-tip-border: #c41400;
  --alert-tip-title: #a81200;
  --alert-tip-bg: rgba(246, 25, 0, 0.06);
  --bg-effect-primary: rgba(63, 185, 80, 0.1);
  --bg-effect-secondary: rgba(246, 25, 0, 0.06);
  --grid-overlay-color: rgba(196, 20, 0, 0.04);
  --table-border-color: rgba(80, 100, 80, 0.16);
  --menu-bar-link-color: hsl(120, 8%, 38%);
  --menu-bar-link-color-hover: hsl(120, 25%, 10%);
  --inline-code-color: hsl(142, 35%, 28%);
  --menu-bg: color-mix(in srgb, var(--bg) 88%, transparent);
  --card-bg: rgba(255, 255, 255, 0.7);
  --particle-glow-soft: rgba(196, 20, 0, 0.22);
  --brand-handle-color: hsl(142, 50%, 28%);
}

[data-mode="light"] .particle { animation-name: float-particle-light; }
@keyframes float-particle-light {
  0%   { transform: translate3d(var(--px), 100vh, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.65; }
  90%  { opacity: 0.65; }
  100% { transform: translate3d(calc(var(--px) * 1.4), -120vh, 0) rotate(720deg); opacity: 0; }
}