/* 3026 D3C0 — reusable overlay theme
   Host: set data-theme="3026-d3c0" on <html> and class="theme-panel" on the glass surface.
   Pulse: themes/3026-d3c0/theme.js writes --theme-text-shadow on the panel (or an ancestor).
   Palette: HackTheBox Lite — deep navy glass, #9fef00 lime metal, cool readout text.
   Direction: futuristic art deco geometry on HTB cyber colors. */

[data-theme="3026-d3c0"] {
  /* HTB Lite — primary brand + surfaces */
  --d3c0-htb-green: #9fef00;
  --d3c0-htb-lime: #c5f467;
  --d3c0-htb-amber: #ffaf00;
  --d3c0-htb-fg: #a4b1cd;
  --d3c0-htb-fg-bright: #c5d1eb;
  --d3c0-htb-navy: #1a2332;
  --d3c0-htb-void: #111927;
  --d3c0-htb-panel: #141d2b;
  --d3c0-htb-slate: #313f55;

  --d3c0-text-primary: var(--d3c0-htb-lime);
  --d3c0-text-base: var(--d3c0-htb-fg);

  --d3c0-glass-grad-a: rgba(17, 25, 39, 0.84);
  --d3c0-glass-grad-b: rgba(26, 35, 50, 0.62);
  --d3c0-glass-border: rgba(159, 239, 0, 0.42);
  --d3c0-glass-inset-highlight: rgba(197, 244, 103, 0.14);
  --d3c0-glass-shadow: rgba(17, 25, 39, 0.55);
  --d3c0-outline-opacity: 0.55;
  --d3c0-outline-inner: rgba(159, 239, 0, var(--d3c0-outline-opacity));
  --d3c0-outline-outer: rgba(17, 25, 39, var(--d3c0-outline-opacity));
  --d3c0-outline-width: 0.2rem;

  --d3c0-blur-amount: 10px;
  --d3c0-saturate-amount: 125%;
  /* Art deco lean: tighter radius than soft glass themes */
  --d3c0-radius-panel: 4px;

  --d3c0-glow-primary: rgba(159, 239, 0, 0.7);
  --d3c0-glow-soft: rgba(197, 244, 103, 0.32);
  --d3c0-glow-amber: rgba(255, 175, 0, 0.22);

  --theme-text-shadow:
    0 0 6px var(--d3c0-glow-primary),
    0 0 14px var(--d3c0-glow-soft);

  /* Host apps that already use --banner-* tokens pick these up without extra CSS */
  --banner-bg: linear-gradient(160deg, var(--d3c0-glass-grad-a), var(--d3c0-glass-grad-b));
  --banner-border: var(--d3c0-glass-border);
  --banner-text: var(--d3c0-text-primary);
  --banner-shadow:
    inset 0 1px 0 var(--d3c0-glass-inset-highlight),
    0 12px 28px var(--d3c0-glass-shadow),
    0 0 0 var(--d3c0-outline-width) var(--d3c0-outline-inner),
    0 0 0 calc(var(--d3c0-outline-width) * 2) var(--d3c0-outline-outer);
  --banner-blur: var(--d3c0-blur-amount);
  --banner-saturate: var(--d3c0-saturate-amount);
  --banner-radius-base: var(--d3c0-radius-panel);
  --banner-accent: var(--d3c0-htb-green);
}

[data-theme="3026-d3c0"] .theme-panel {
  position: relative;
  isolation: isolate;
  color: var(--d3c0-text-primary);
  background: linear-gradient(160deg, var(--d3c0-glass-grad-a), var(--d3c0-glass-grad-b));
  border: 1px solid var(--d3c0-glass-border);
  border-radius: var(--banner-radius, var(--d3c0-radius-panel));
  box-shadow:
    inset 0 1px 0 var(--d3c0-glass-inset-highlight),
    0 12px 28px var(--d3c0-glass-shadow),
    0 0 0 var(--d3c0-outline-width) var(--d3c0-outline-inner),
    0 0 0 calc(var(--d3c0-outline-width) * 2) var(--d3c0-outline-outer);
  backdrop-filter: blur(var(--d3c0-blur-amount)) saturate(var(--d3c0-saturate-amount));
  -webkit-backdrop-filter: blur(var(--d3c0-blur-amount)) saturate(var(--d3c0-saturate-amount));
  text-shadow: var(--theme-text-shadow);
}

/* Art-deco sunburst wash — HTB green + amber, low opacity over navy glass */
[data-theme="3026-d3c0"] .theme-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-conic-gradient(
      from 0deg at 50% 100%,
      rgba(159, 239, 0, 0.09) 0deg 6deg,
      transparent 6deg 12deg
    ),
    linear-gradient(
      180deg,
      rgba(197, 244, 103, 0.06) 0%,
      transparent 45%,
      rgba(255, 175, 0, 0.05) 100%
    );
  opacity: 0.85;
  mix-blend-mode: screen;
}

[data-theme="3026-d3c0"] .theme-panel > * {
  position: relative;
  z-index: 1;
}

[data-theme="3026-d3c0"] .theme-panel * {
  text-shadow: var(--theme-text-shadow);
}