/* Neon Terminal Theme for Hyperscript */
/* Phosphor green base with neon accents */

:root.neon-terminal {
  /* Typography */
  --main-font: 'JetBrains Mono', 'Cascadia Code', 'Monaco', monospace;
  --secondary-font: 'Press Start 2P', 'Chicago', monospace;
  --display-font: 'Press Start 2P', 'Chicago', monospace;
  --mono-font: 'JetBrains Mono', 'Cascadia Code', monospace;
  
  --rhythm: 1.6rem; /* More breathing room */
  --line-length: 42rem; /* Wider for modern screens */
  --border-radius: .5rem; /* CRT-inspired curves */
  --density: 1; /* Tighter, more modern spacing */
  
  /* Phosphor green palette - softer, more accessible */
  --fg: #4ADE80; /* green-400 - easier on eyes */
  --bg: #0F0F0F;
  --muted-fg: #22C55E; /* green-500 */
  --faded-fg: #16A34A; /* green-600 */
  --graphical-fg: #4ADE80;

  --box-bg: #1A1A1A;
  --interactive-bg: #2A2A2A;

  --accent: #F472B6; /* pink-400 - softer */
  --muted-accent: #DB2777; /* pink-600 */

  /* Status palette - softer tones */
  --plain-fg: #4ADE80;
  --plain-bg: #1A1A1A;
  --info-fg: #22D3EE; /* cyan-400 */
  --info-bg: #001A1A;
  --ok-fg: #4ADE80; /* green-400 */
  --ok-bg: #001A00;
  --bad-fg: #F87171; /* red-400 */
  --bad-bg: #1A0008;
  --warn-fg: #FBBF24; /* amber-400 */
  --warn-bg: #1A1A00;

  /* Graphical variants */
  --plain-graphical-fg: rgba(74, 222, 128, 0.5);
  --info-graphical-fg: rgba(34, 211, 238, 0.5);
  --ok-graphical-fg: rgba(74, 222, 128, 0.5);
  --bad-graphical-fg: rgba(248, 113, 113, 0.5);
  --warn-graphical-fg: rgba(251, 191, 36, 0.5);

  /* Code syntax highlighting - neon palette */
  --code-fg: #4ADE80;
  --code-comment: #16A34A;
  --code-keyword: #F472B6;
  --code-string: #22D3EE;
  --code-function: #FBBF24;
  --code-number: #A78BFA;
  --code-operator: #4ADE80;
  --code-punctuation: #22C55E;

  /* Shared spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
}

/* Light mode - inverted terminal */
:root.neon-terminal.-no-dark-theme,
html.-light-mode .neon-terminal {
  --fg: #003300;
  --bg: #F0FFE0;
  --box-bg: #E0FFD0;
  --interactive-bg: #D0FFC0;
  --accent: #DB2777;
  --muted-accent: #BE185D;
  --muted-fg: #002200;
  --faded-fg: #668866;

  --plain-fg: #003300;
  --plain-bg: #E0FFD0;
  --info-fg: #006666;
  --info-bg: #E0FFFF;
  --ok-fg: #003300;
  --ok-bg: #D0FFD0;
  --bad-fg: #660020;
  --bad-bg: #FFE0E8;
  --warn-fg: #666600;
  --warn-bg: #FFFFE0;

  /* Light mode code colors */
  --code-fg: #003300;
  --code-comment: #668866;
  --code-keyword: #BE185D;
  --code-string: #0E7490;
  --code-function: #92400E;
  --code-number: #6D28D9;
  --code-operator: #003300;
  --code-punctuation: #166534;
}

/* Dark mode - explicit toggle (default is already dark) */
html.-dark-mode .neon-terminal,
.neon-terminal.-dark-mode {
  --fg: #4ADE80;
  --bg: #0F0F0F;
  --box-bg: #1A1A1A;
  --accent: #F472B6;
}

/* Neon Terminal specific overrides */
.neon-terminal {
  font-family: var(--mono-font);
  background: var(--bg);
  color: var(--fg);
}

/* CRT scan line effect - DISABLED by default, add .crt-effect class to enable */
.neon-terminal::before {
  content: none;
}

.neon-terminal.crt-effect::before {
  content: "";
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    transparent 50%,
    rgba(74, 222, 128, 0.015) 50%
  );
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 1000;
}

/* Subtle phosphor effect - removed from body text for readability */
.neon-terminal body {
  position: relative;
}

/* Layout - matching Stack theme */
.neon-terminal .container {
  max-inline-size: 56rem;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.neon-terminal #features-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-inline-size: 56rem;
  margin-inline: auto;
  padding-block: var(--space-4);
}

.neon-terminal #features-list h2 {
  text-align: center;
  margin-block: var(--space-6);
}

.neon-terminal #features-list > div {
  margin-block: var(--space-3);
}

@media (max-width: 768px) {
  .neon-terminal .container {
    padding-inline: var(--space-4);
  }
}

/* Floating cards with subtle glow */
.neon-terminal .card,
.neon-terminal section,
.neon-terminal article {
  background: var(--box-bg);
  border: 1px solid var(--fg);
  border-radius: var(--border-radius);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  box-shadow: 0 0 15px rgba(74, 222, 128, 0.15);
  position: relative;
  overflow: hidden;
}

/* Animated hover effects - simplified */
@media (prefers-reduced-motion: no-preference) {
  .neon-terminal button,
  .neon-terminal .button,
  .neon-terminal a {
    transition: color 0.2s ease, background-color 0.2s ease, transform 0.1s ease;
  }

  .neon-terminal button:hover,
  .neon-terminal .button:hover {
    transform: scale(1.02);
    box-shadow: 0 0 20px var(--accent);
  }

  .neon-terminal a:hover {
    text-shadow: 0 0 8px currentColor;
  }
}

/* Buttons with neon glow */
.neon-terminal button,
.neon-terminal input[type="submit"],
.neon-terminal input[type="button"],
.neon-terminal .button {
  background: var(--interactive-bg);
  color: var(--fg);
  border: 2px solid var(--accent);
  border-radius: var(--border-radius);
  padding: 0.75rem 1.5rem;
  font-family: var(--mono-font);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.neon-terminal button:active,
.neon-terminal .button:active {
  transform: scale(0.98);
}

/* Links with neon accent */
.neon-terminal a {
  color: var(--accent);
  text-decoration: none;
  position: relative;
}

.neon-terminal a:visited {
  color: var(--muted-accent);
}

.neon-terminal a:hover {
  color: var(--accent);
}

.neon-terminal a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.neon-terminal a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Headers with display font */
.neon-terminal h1,
.neon-terminal h2,
.neon-terminal h3,
.neon-terminal h4,
.neon-terminal h5,
.neon-terminal h6 {
  font-family: var(--display-font);
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 2rem 0 1rem;
  line-height: 1.2;
}

.neon-terminal h1 {
  font-size: 1.5rem;
  text-shadow: 
    0 0 10px var(--accent),
    0 0 20px var(--accent);
}

.neon-terminal h2 {
  font-size: 1.25rem;
}

.neon-terminal h3 {
  font-size: 1rem;
}

/* Code blocks with terminal styling */
.neon-terminal pre,
.neon-terminal pre[class*="language-"] {
  background: var(--bg);
  color: var(--code-fg);
  border: 1px solid var(--fg);
  border-radius: var(--border-radius);
  padding: var(--space-6);
  overflow-x: auto;
  font-family: var(--mono-font);
  font-size: 0.95rem;
  line-height: 1.6;
  box-shadow:
    inset 0 0 30px rgba(74, 222, 128, 0.08),
    0 0 10px rgba(74, 222, 128, 0.15);
}

.neon-terminal code,
.neon-terminal code[class*="language-"] {
  font-family: var(--mono-font);
  color: var(--code-fg);
}

.neon-terminal :not(pre) > code {
  background: rgba(74, 222, 128, 0.1);
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  font-size: 0.9em;
}

.neon-terminal pre code {
  background: none;
  padding: 0;
}

/* Syntax highlighting - neon palette */
.neon-terminal .token.comment,
.neon-terminal .token.prolog,
.neon-terminal .token.doctype,
.neon-terminal .token.cdata {
  color: var(--code-comment);
}

.neon-terminal .token.keyword,
.neon-terminal .token.tag,
.neon-terminal .token.boolean,
.neon-terminal .token.constant,
.neon-terminal .token.deleted,
.neon-terminal .token.important {
  color: var(--code-keyword);
}

.neon-terminal .token.string,
.neon-terminal .token.char,
.neon-terminal .token.attr-value,
.neon-terminal .token.inserted {
  color: var(--code-string);
}

.neon-terminal .token.function,
.neon-terminal .token.class-name,
.neon-terminal .token.builtin {
  color: var(--code-function);
}

.neon-terminal .token.number,
.neon-terminal .token.symbol {
  color: var(--code-number);
}

.neon-terminal .token.operator,
.neon-terminal .token.entity,
.neon-terminal .token.url {
  color: var(--code-operator);
}

.neon-terminal .token.punctuation {
  color: var(--code-punctuation);
}

.neon-terminal .token.property,
.neon-terminal .token.attr-name,
.neon-terminal .token.variable {
  color: var(--code-fg);
}

.neon-terminal .token.selector,
.neon-terminal .token.regex {
  color: var(--code-string);
}

/* Tables with neon borders */
.neon-terminal table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin: 1rem 0;
  border: 1px solid var(--fg);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 255, 65, 0.2);
}

.neon-terminal th,
.neon-terminal td {
  padding: 0.75rem;
  text-align: start;
  border-bottom: 1px solid rgba(0, 255, 65, 0.3);
}

.neon-terminal th {
  background: var(--interactive-bg);
  color: var(--accent);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.9em;
}

.neon-terminal tr:last-child td {
  border-bottom: none;
}

.neon-terminal tr:hover {
  background: rgba(0, 255, 65, 0.05);
}

/* Form elements with neon styling */
.neon-terminal input[type="text"],
.neon-terminal input[type="email"],
.neon-terminal input[type="password"],
.neon-terminal input[type="number"],
.neon-terminal textarea,
.neon-terminal select {
  background: var(--bg);
  color: var(--fg);
  border: 2px solid var(--muted-fg);
  border-radius: var(--border-radius);
  padding: 0.75rem;
  font-family: var(--mono-font);
  width: 100%;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.neon-terminal input:focus,
.neon-terminal textarea:focus,
.neon-terminal select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 
    0 0 10px var(--accent),
    inset 0 0 5px var(--accent);
}

/* Custom checkboxes and radio buttons */
.neon-terminal input[type="checkbox"],
.neon-terminal input[type="radio"] {
  width: 1.2rem;
  height: 1.2rem;
  border: 2px solid var(--fg);
  background: var(--bg);
  -webkit-appearance: none;
  appearance: none;
  margin-inline-end: 0.5rem;
  vertical-align: middle;
  cursor: pointer;
  position: relative;
}

.neon-terminal input[type="checkbox"] {
  border-radius: 0.25rem;
}

.neon-terminal input[type="radio"] {
  border-radius: 50%;
}

.neon-terminal input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--accent);
  font-weight: bold;
  text-shadow: 0 0 5px var(--accent);
}

.neon-terminal input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.5rem;
  height: 0.5rem;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--accent);
}

/* Scrollbar styling (webkit only) */
.neon-terminal ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.neon-terminal ::-webkit-scrollbar-track {
  background: var(--bg);
  border-radius: var(--border-radius);
}

.neon-terminal ::-webkit-scrollbar-thumb {
  background: var(--muted-fg);
  border-radius: var(--border-radius);
  border: 2px solid var(--bg);
}

.neon-terminal ::-webkit-scrollbar-thumb:hover {
  background: var(--fg);
}

/* Terminal cursor animation */
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.neon-terminal .terminal-cursor::after {
  content: '▋';
  color: var(--fg);
  animation: blink 1s infinite;
}

/* Navigation bar adjustments */
.neon-terminal .navbar {
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--fg);
  box-shadow: 0 0 20px rgba(0, 255, 65, 0.3);
}

/* Theme selector styling */
.neon-terminal #theme-selector {
  background: var(--interactive-bg);
  color: var(--fg);
  border: 2px solid var(--accent);
  border-radius: var(--border-radius);
  padding: 0.5rem 1rem;
  font-family: var(--mono-font);
  cursor: pointer;
}

.neon-terminal #theme-selector:focus {
  outline: none;
  box-shadow: 0 0 10px var(--accent);
}