/* ════════════════════════════════════════
   BUDA HACK SECURITY — Light theme
   Active when <html data-theme="light"> (set by assets/js/theme.js).

   Brand rule: yellow #ffe600 stays as a FILL (buttons, badges) with black
   text; yellow used as TEXT/lines becomes dark amber #8a6d00 so it passes
   WCAG AA on white. Terminals and code blocks intentionally stay dark.
════════════════════════════════════════ */

/* ── Toggle button (both themes) ── */
.bhs-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin: 0 4px;
  padding: 0;
  font-size: 14px;
  color: #b5b5b5;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 100px;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.bhs-theme-toggle:hover { color: #ffe600; border-color: rgba(255,230,0,.5); }
.bhs-theme-toggle:focus-visible { outline: 2px solid #ffe600; outline-offset: 2px; }
@media (max-width: 991.98px) {
  .navbar-collapse .bhs-theme-toggle { margin: 0 0 10px; }
}

/* ── Design tokens (every name used across the pages) ── */
html[data-theme="light"] {
  --lt-bg:        #f7f7f4;
  --lt-surface:   #ffffff;
  --lt-raised:    #f0f2f5;
  --lt-overlay:   #e7ebf0;
  --lt-ink:       #0d1117;
  --lt-body:      #394150;
  --lt-muted:     #5b6472;
  --lt-faint:     #c3c9d2;
  --lt-line:      rgba(15,23,42,.10);
  --lt-line-hi:   rgba(15,23,42,.20);
  --lt-accent:    #8a6d00;
  --lt-yellow:    #ffe600;
  --lt-purple:    #6d28d9;
  --lt-cyan:      #0e7490;
  --lt-red:       #b91c1c;
  --lt-ok:        #15803d;

  /* backgrounds */
  --bg-base: var(--lt-bg);      --bg: var(--lt-bg);
  --bg-surface: var(--lt-surface); --bg1: var(--lt-surface); --s1: var(--lt-surface);
  --bg-raised: var(--lt-raised);   --bg2: var(--lt-raised);
  --bg-overlay: var(--lt-overlay); --bg3: var(--lt-overlay);
  --bg-grad-top: var(--lt-bg);  --bg-grad-bottom: var(--lt-bg);
  --surface: rgba(255,255,255,.92);
  --muted: rgba(15,23,42,.05);

  /* text */
  --text-hi: var(--lt-ink);  --ink: var(--lt-ink);  --white: var(--lt-ink);  --text: var(--lt-ink);
  --text-body: var(--lt-body); --text-md: var(--lt-body); --ink2: var(--lt-body); --dim: var(--lt-body);
  --text-muted: var(--lt-muted); --text-dim: var(--lt-muted); --text-lo: var(--lt-muted);
  --ink3: var(--lt-muted); --dimmer: var(--lt-muted);
  --text-faint: var(--lt-faint);

  /* lines */
  --border: var(--lt-line); --b1: var(--lt-line); --bd: var(--lt-line);
  --border-hi: var(--lt-line-hi); --bd2: var(--lt-line-hi);
  --border-green: rgba(138,109,0,.35);
  --border-yellow: rgba(138,109,0,.35);
  --border-purp: rgba(109,40,217,.30);
  --border-cyan: rgba(14,116,144,.30);
  --border-red: rgba(185,28,28,.30);

  /* accents (text/lines) */
  --green: var(--lt-accent); --g: var(--lt-accent); --y: var(--lt-accent); --yellow: var(--lt-accent);
  --green-glow: #a88600; --y2: #a88600;
  --green-dim: rgba(255,230,0,.22); --g-dim: rgba(255,230,0,.18); --yd: rgba(255,230,0,.20);
  --green-mid: rgba(255,230,0,.12); --yellow-dim: rgba(255,230,0,.20);
  --yg: rgba(138,109,0,.25); --yellow-glow: rgba(138,109,0,.25);
  --purple: var(--lt-purple); --p: var(--lt-purple); --accent-purple: var(--lt-purple);
  --purple-dim: rgba(109,40,217,.10); --pd: rgba(109,40,217,.10); --pg: rgba(109,40,217,.25);
  --cyan: var(--lt-cyan); --c: var(--lt-cyan);
  --cyan-dim: rgba(14,116,144,.10); --cd: rgba(14,116,144,.10);
  --red: var(--lt-red); --r: var(--lt-red); --danger: var(--lt-red); --err-red: var(--lt-red);
  --red-dim: rgba(185,28,28,.10);
  --red-bright: var(--lt-red); --red-dark: #7f1d1d;
  --red-glow: rgba(185,28,28,.25); --red-trace: rgba(185,28,28,.08);
  --ok: var(--lt-ok); --accent-green: var(--lt-ok); --accent-green-dim: rgba(21,128,61,.35);

  /* glows become soft shadows */
  --shadow-green: 0 6px 20px rgba(138,109,0,.18);
  --shadow-purp: 0 6px 20px rgba(109,40,217,.15);
  --shadow-cyan: 0 6px 20px rgba(14,116,144,.15);
  --shadow-red: 0 6px 20px rgba(185,28,28,.15);
  --shadow-yellow: 0 6px 20px rgba(138,109,0,.18);
  --shadow-card: 0 8px 30px rgba(15,23,42,.08);

  /* updates.css tokens */
  --bhs-accent: var(--lt-accent);
  --bhs-accent-dim: rgba(255,230,0,.22);
  --bhs-accent-line: rgba(138,109,0,.30);
  --bhs-bg: var(--lt-surface);
  --bhs-bg-raised: var(--lt-raised);
  --bhs-text-hi: var(--lt-ink);
  --bhs-text: var(--lt-body);
  --bhs-text-muted: var(--lt-muted);
  --bhs-border: var(--lt-line);
  --bhs-border-hi: var(--lt-line-hi);
  --bhs-ok: var(--lt-ok);
  --bhs-err: var(--lt-red);

  background: var(--lt-bg);
}

/* ── Terminals, code blocks and the boot loader stay dark ── */
html[data-theme="light"] :is(.hero-terminal, .terminal-box, .term-lines, #loader-screen, .code-block-wrap, #markdown-container pre, .card-thumb, .wu-thumb, .proj-thumb, .thumb-badges, .diff-badge) {
  --bg-base: #01040a; --bg: #01040a; --bg-surface: #030812; --bg1: #030812; --s1: #050d1c;
  --bg-raised: #050d1c; --bg2: #050d1c; --bg-overlay: #081226; --bg3: #081226;
  --text-hi: #f0f0f0; --ink: #ffffff; --white: #ffffff; --text: #e8e8e8;
  --text-body: #b5b5b5; --text-md: #b5b5b5; --ink2: #b5b5b5; --dim: #b5b5b5;
  --text-muted: #8a8a8a; --text-dim: #888888; --text-lo: #6b6b6b; --ink3: #6b6b6b; --dimmer: #6b6b6b;
  --text-faint: #2e2e2e;
  --border: rgba(255,255,255,.08); --b1: rgba(255,255,255,.06); --bd: rgba(255,255,255,.08);
  --border-hi: rgba(255,255,255,.18); --bd2: rgba(255,255,255,.18);
  --green: #ffe600; --g: #ffe600; --y: #ffe600; --yellow: #ffe600;
  --purple: #a855f7; --p: #a855f7; --cyan: #00eaff; --c: #00eaff;
  --red: #ff3b3b; --r: #ff3b3b; --ok: #4ade80;
  color-scheme: dark;
}
html[data-theme="light"] .hero-terminal,
html[data-theme="light"] .terminal-box,
html[data-theme="light"] .code-block-wrap { box-shadow: 0 12px 40px rgba(15,23,42,.18); }

/* ── Base: soft paper + blueprint dot grid + brand auras (fixed to the viewport) ── */
html[data-theme="light"] {
  background-color: #f7f7f4;
  background-image:
    radial-gradient(860px 600px at 98% -6%, rgba(139,92,246,.26), transparent 60%),
    radial-gradient(900px 640px at 88% 112%, rgba(34,211,238,.22), transparent 60%),
    radial-gradient(700px 520px at -4% 104%, rgba(236,72,153,.12), transparent 60%),
    radial-gradient(ellipse 130% 100% at 50% 0%, transparent 50%, rgba(247,247,244,.85) 92%),
    radial-gradient(rgba(15,23,42,.13) 1px, transparent 1.4px);
  background-size: auto, auto, auto, auto, 22px 22px;
  background-attachment: fixed;
}
html[data-theme="light"] body {
  background: transparent !important;
  color: var(--lt-body);
}
/* full-width sections that repaint the page colour would hide the backdrop */
html[data-theme="light"] :is(.hero, .page-head) { background: transparent !important; }
html[data-theme="light"] ::selection { background: rgba(255,230,0,.55); color: #000; }
html[data-theme="light"] ::-webkit-scrollbar-track { background: var(--lt-bg); }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #c3c9d2; }

/* ── Animated backgrounds, re-used in light mode ──
   The canvases paint neon on black. invert + hue-rotate(180deg) turns the black
   into white and keeps each hue (darker); multiply then drops the white, leaving
   coloured glyphs/particles on the paper background. */
html[data-theme="light"] #hero-matrix {
  filter: invert(1) hue-rotate(180deg) saturate(1.6);
  mix-blend-mode: multiply;
  opacity: .3 !important;
}
html[data-theme="light"] #star-canvas {
  filter: invert(1) hue-rotate(180deg);
  mix-blend-mode: multiply;
  opacity: .35 !important;
}
html[data-theme="light"] .hero-blob { mix-blend-mode: multiply; filter: blur(70px); }
html[data-theme="light"] .hero-blob-1 { display: none !important; }
html[data-theme="light"] .hero-blob-2 { background: rgba(139,92,246,.35) !important; }

/* ── Highlighted words: vivid gradient ink with a soft neon halo ── */
html[data-theme="light"] :is(.hl-green, .hl-purple, .hl-purp, .hl-cyan, .hl-red, .brand-accent, .page-title .hl) {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}
html[data-theme="light"] :is(.hl-green, .brand-accent, .page-title .hl) {
  background-image: linear-gradient(95deg, #9a6700 0%, #c27c00 45%, #c2410c 100%);
  filter: drop-shadow(0 4px 14px rgba(245,158,11,.35));
}
html[data-theme="light"] :is(.hl-purple, .hl-purp) {
  background-image: linear-gradient(95deg, #6d28d9 0%, #9333ea 50%, #db2777 100%);
  filter: drop-shadow(0 4px 14px rgba(147,51,234,.30));
}
html[data-theme="light"] .hl-cyan {
  background-image: linear-gradient(95deg, #0e7490 0%, #0369a1 55%, #4f46e5 100%);
  filter: drop-shadow(0 4px 14px rgba(14,116,144,.30));
}
html[data-theme="light"] .hl-red {
  background-image: linear-gradient(95deg, #b91c1c 0%, #db2777 100%);
  filter: drop-shadow(0 4px 14px rgba(219,39,119,.28));
}

/* ── Neon-on-paper accents ── */
html[data-theme="light"] :is(.btn-primary-custom, .btn-sub, .bhs-newsletter__submit, .transmit-btn) {
  box-shadow: 0 8px 22px -6px rgba(245,180,0,.65), inset 0 -2px 0 rgba(0,0,0,.08);
}
html[data-theme="light"] :is(.btn-primary-custom, .btn-sub, .bhs-newsletter__submit, .transmit-btn):hover {
  box-shadow: 0 12px 30px -6px rgba(245,180,0,.8), inset 0 -2px 0 rgba(0,0,0,.08);
}
html[data-theme="light"] :is(.hero-eyebrow, .page-eyebrow) {
  background: linear-gradient(90deg, rgba(255,230,0,.35), rgba(255,255,255,.7)) !important;
  box-shadow: 0 4px 16px -4px rgba(245,180,0,.45);
}
html[data-theme="light"] #scroll-bar { box-shadow: 0 0 10px rgba(245,158,11,.6); }

/* Text glows look muddy on white */
html[data-theme="light"] * { text-shadow: none !important; }

/* ── Toggle button in light ── */
html[data-theme="light"] .bhs-theme-toggle {
  color: var(--lt-body);
  background: #fff;
  border-color: var(--lt-line-hi);
}
html[data-theme="light"] .bhs-theme-toggle:hover { color: #000; border-color: var(--lt-accent); background: rgba(255,230,0,.25); }
html[data-theme="light"] .bhs-theme-toggle:focus-visible { outline-color: var(--lt-accent); }

/* ── Navbar ── */
html[data-theme="light"] .navbar {
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(16px) saturate(1.6);
  border-bottom-color: var(--lt-line) !important;
}
html[data-theme="light"] .navbar-toggler-icon { filter: invert(1) brightness(.2); }
html[data-theme="light"] .nav-link { color: var(--lt-body) !important; }
html[data-theme="light"] .nav-link:hover { color: #000 !important; }
html[data-theme="light"] .nav-link.active { color: var(--lt-accent) !important; }
html[data-theme="light"] .nav-link::after { box-shadow: none !important; }
html[data-theme="light"] .lang-switch { background: #fff; border-color: var(--lt-line-hi); }
@media (max-width: 991.98px) {
  html[data-theme="light"] .navbar-collapse { background: rgba(255,255,255,.98) !important; }
}

/* Yellow stays a fill with black text */
html[data-theme="light"] .nav-cta,
html[data-theme="light"] .btn-primary-custom,
html[data-theme="light"] .btn-sub,
html[data-theme="light"] .transmit-btn,
html[data-theme="light"] .lang-switch-btn.active,
html[data-theme="light"] .bhs-newsletter__submit,
html[data-theme="light"] .bhs-banner__tag {
  background: var(--lt-yellow) !important;
  color: #000 !important;
}
html[data-theme="light"] .nav-cta.is-soon { background: #e9e3b5 !important; opacity: 1; color: #3a3a3a !important; }

/* ── Banner / updates components ── */
html[data-theme="light"] .bhs-banner { background: linear-gradient(90deg, rgba(255,230,0,.35), rgba(109,40,217,.08)); }
html[data-theme="light"] .bhs-banner__link:hover,
html[data-theme="light"] .bhs-entry__link:hover { color: #000; }
html[data-theme="light"] .bhs-newsletter { background: radial-gradient(ellipse at top left, rgba(255,230,0,.18), transparent 60%), #fff; }
html[data-theme="light"] .bhs-field input:focus-visible { box-shadow: 0 0 0 3px rgba(255,230,0,.55); }
html[data-theme="light"] .bhs-newsletter__submit:focus-visible { outline-color: #000; }

/* ── Footer ── */
html[data-theme="light"] .footer {
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.92)) !important;
  border-top-color: var(--lt-line) !important;
  backdrop-filter: blur(6px);
}
html[data-theme="light"] .social-link { background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.06); }

/* ── Cards: white, soft layered shadows, gentle lift ── */
html[data-theme="light"] :is(.module-card, .neon-card, .bhs-entry__card, .bhs-newsletter, .notice-bar,
  .skills-card, .skills-panel, .card, .lab-card, .doc-card, .proj-card, .panel, .contact-card, .side-card) {
  background-color: #fff;
  border-color: rgba(15,23,42,.08) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -6px rgba(15,23,42,.08);
}
html[data-theme="light"] :is(.module-card, .neon-card, .lab-card, .doc-card, .proj-card, .card):hover {
  border-color: rgba(245,180,0,.55) !important;
  box-shadow: 0 0 0 1px rgba(245,180,0,.25), 0 18px 40px -10px rgba(245,158,11,.35), 0 10px 24px -12px rgba(139,92,246,.25);
}

/* ── Home hero badge ("ACCESS GRANTED") ── */
html[data-theme="light"] .hero-badge {
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from var(--hb-angle), #f5b400, #9333ea, #0891b2, #f5b400) border-box;
  box-shadow: 0 8px 26px -8px rgba(147,51,234,.35), 0 6px 20px -8px rgba(245,180,0,.5);
}
html[data-theme="light"] .hero-badge::after {
  background: linear-gradient(110deg, transparent 30%, rgba(255,214,0,.35) 50%, transparent 70%);
}
html[data-theme="light"] .hb-dot { background: #16a34a; }