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

/* Contrast Audit (WCAG 2.1)
   Dark mode (default):
     --fg (#4ADE80) on --bg (#0F0F0F): ~9:1 → AAA ✓
     --muted-fg (#22C55E) on --bg (#0F0F0F): ~6:1 → AA ✓
     --accent (#F472B6) on --bg (#0F0F0F): ~7:1 → AAA ✓
     --code-fg (#4ADE80) on --bg (#0F0F0F): ~9:1 → AAA ✓
     code-token-l (78%) on bg (~10%): ΔL=68% → AAA ✓
   Light mode:
     --fg (#003300) on --bg (#F0FFE0): ~15:1 → AAA ✓
     --accent (#DB2777) on --bg (#F0FFE0): ~4.4:1 → AA large text ✓
   Verified: 2026-01-29 */

: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;

  /* Canonical color aliases (standardized across all themes) */
  --color-bg: var(--bg);
  --color-fg: var(--fg);
  --color-muted: var(--muted-fg);
  --color-faded: var(--faded-fg);
  --color-accent: var(--accent);
  --color-accent-hover: var(--muted-accent);
  --color-surface: var(--box-bg);
  --color-surface-hover: var(--interactive-bg);
  --color-border: var(--fg);
  --color-ok: var(--ok-fg);
  --color-warn: var(--warn-fg);
  --color-bad: var(--bad-fg);

  /* Layer 0: OKLCH Primitives */
  --lch-bg-l: 10%;  --lch-bg-c: 0;  --lch-bg-h: 0;
  --lch-fg-l: 80%;  --lch-fg-c: 0.2;  --lch-fg-h: 150;
  --lch-accent-l: 72%;  --lch-accent-c: 0.17;  --lch-accent-h: 350;
  --polarity: -1;
  --surface-offset: 4%;
  --surface-hover-offset: 8%;

  /* Layer 3: Component Tokens */
  --nav-bg: rgba(10, 10, 10, 0.95);
  --nav-border: var(--fg);
  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --card-radius: var(--border-radius);
  --btn-bg: var(--interactive-bg);
  --btn-fg: var(--fg);
  --btn-radius: var(--border-radius);
  --input-bg: var(--bg);
  --input-border: var(--muted-fg);
  --input-focus-ring: var(--accent);

  /* 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;

  /* Canonical color aliases */
  --color-bg: var(--bg);
  --color-fg: var(--fg);
  --color-muted: var(--muted-fg);
  --color-faded: var(--faded-fg);
  --color-accent: var(--accent);
  --color-accent-hover: var(--muted-accent);
  --color-surface: var(--box-bg);
  --color-surface-hover: var(--interactive-bg);
  --color-border: var(--fg);

  /* Layer 0: Light mode OKLCH Primitives */
  --lch-bg-l: 97.5%;  --lch-bg-c: 0.06;  --lch-bg-h: 130;
  --lch-fg-l: 25%;     --lch-fg-c: 0.08;  --lch-fg-h: 150;
  --lch-accent-l: 52%; --lch-accent-c: 0.2; --lch-accent-h: 350;
  --polarity: 1;
  --surface-offset: -2.5%;
  --surface-hover-offset: -4.5%;
}

/* 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;

  /* Canonical color aliases */
  --color-bg: var(--bg);
  --color-fg: var(--fg);
  --color-surface: var(--box-bg);
  --color-accent: var(--accent);
}

/* OKLCH progressive enhancement */
@supports (color: oklch(0% 0 0)) {
  :root.neon-terminal {
    --color-bg: oklch(var(--lch-bg-l) var(--lch-bg-c) var(--lch-bg-h));
    --color-fg: oklch(var(--lch-fg-l) var(--lch-fg-c) var(--lch-fg-h));
    --color-accent: oklch(var(--lch-accent-l) var(--lch-accent-c) var(--lch-accent-h));
    --color-surface: oklch(calc(var(--lch-bg-l) + var(--surface-offset)) var(--lch-bg-c) var(--lch-bg-h));
    --color-surface-hover: oklch(calc(var(--lch-bg-l) + var(--surface-hover-offset)) var(--lch-bg-c) var(--lch-bg-h));
  }

  /* Dark mode — match (0,2,0) specificity so oklch wins over hex fallbacks */
  html.-dark-mode .neon-terminal,
  .neon-terminal.-dark-mode {
    --color-bg: oklch(var(--lch-bg-l) var(--lch-bg-c) var(--lch-bg-h));
    --color-fg: oklch(var(--lch-fg-l) var(--lch-fg-c) var(--lch-fg-h));
    --color-accent: oklch(var(--lch-accent-l) var(--lch-accent-c) var(--lch-accent-h));
    --color-surface: oklch(calc(var(--lch-bg-l) + var(--surface-offset)) var(--lch-bg-c) var(--lch-bg-h));
    --color-surface-hover: oklch(calc(var(--lch-bg-l) + var(--surface-hover-offset)) var(--lch-bg-c) var(--lch-bg-h));
  }

  /* Light mode — match (0,2,1) specificity */
  :root.neon-terminal.-no-dark-theme,
  html.-light-mode .neon-terminal {
    --color-bg: oklch(var(--lch-bg-l) var(--lch-bg-c) var(--lch-bg-h));
    --color-fg: oklch(var(--lch-fg-l) var(--lch-fg-c) var(--lch-fg-h));
    --color-accent: oklch(var(--lch-accent-l) var(--lch-accent-c) var(--lch-accent-h));
    --color-surface: oklch(calc(var(--lch-bg-l) + var(--surface-offset)) var(--lch-bg-c) var(--lch-bg-h));
    --color-surface-hover: oklch(calc(var(--lch-bg-l) + var(--surface-hover-offset)) var(--lch-bg-c) var(--lch-bg-h));
  }
}

/* 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: calc(var(--space-3) * var(--density));
}

@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(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-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(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--accent);
  border-radius: var(--btn-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;
}

/* 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(--input-bg);
  color: var(--fg);
  border: 2px solid var(--input-border);
  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: var(--nav-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--nav-border);
  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);
}

/* High Contrast */
@media (prefers-contrast: more) {
  :root.neon-terminal {
    --fg: #5EF29D;
    --muted-fg: #3ADB73;
    --faded-fg: #22A855;
    --code-token-c: 0.25;
  }

  :root.neon-terminal.-no-dark-theme,
  html.-light-mode .neon-terminal {
    --fg: #002200;
    --muted-fg: #001A00;
    --faded-fg: #446644;
  }
}