/* ==========================================================================
   90's Style skin  —  cyberpunk / hacker-underground edition (data-skin="90s")
   --------------------------------------------------------------------------
   Not the mall-web 90s — the OTHER 90s: Matrix, Ghost in the Shell, phreaking
   BBSes, the demoscene, `nmap` at 3am. Terminal type, neon glow, scanlines,
   chromatic-glitch headers, a scrolling ticker. Pure CSS, zero JS. Two layers:
     1. remaps the Quartz chrome palette (loud edition);
     2. overrides a handful of SazAI L2 tokens so the <sz-*> components come too
        (the DS's "theme = a token-override layer", demonstrated live).
   Two moods via the theme bridge:
     light = cyber-zine (cool paper, magenta/cyan neon, mono type);
     dark  = the money shot — Matrix phosphor-green on black, GITS terminal.
   The graph reads the same --secondary/--tertiary, so it goes cyberpunk with the
   chrome (dark = green nodes / magenta tags on black).

   Active ONLY under html[data-skin="90s"]. Link AFTER tokens.css (source order
   must win). Honors prefers-reduced-motion (animations stop; the look stays).
   ========================================================================== */

/* Fonts self-hosted via fonts/fonts.css (Orbitron · Share Tech Mono) — CSP-safety / zero-external / on-prem parity, no remote @import. */

/* ---------- LIGHT · cyber-zine ---------- */
:root[data-skin="90s"] {
  /* Quartz chrome palette */
  --light: #e9e8e3;
  --lightgray: #c4c8c2;            /* surfaces / inactive graph links (NOT text) */
  --gray: #5a6b5f;
  --darkgray: #12140f;             /* body text */
  --dark: #0a5b6e;                 /* headers — dark cyan */
  --secondary: #c2148f;            /* links + graph nodes — magenta */
  --tertiary: #0e7490;             /* accents + graph tags — cyan */
  --accent: var(--secondary); --accent-2: var(--textHighlight);   /* component accents follow this skin */
  --highlight: #00ffd0;
  --textHighlight: #ff2bd6;
  --titleFont: "Orbitron", sans-serif;
  --headerFont: "Orbitron", sans-serif;
  --bodyFont: "Share Tech Mono", "Courier New", monospace;
  --codeFont: "Share Tech Mono", "Courier New", monospace;

  /* SazAI L2 overrides — the components come along */
  --bg: #e9e8e3; --surface: #f2f1ec; --surface-2: #dfe3de;
  --text: #12140f; --text-muted: #4a554d; --text-faint: #7a857c;
  --border: #0e7490; --border-strong: #0a5b6e;
  --primary: #c2148f; --on-primary: #ffffff;
  --focus-ring: #0e7490;
  --info: #0e7490; --success: #1a7a1a; --warning: #b8860b; --danger: #c81e1e;
  --font-sans: "Share Tech Mono", "Courier New", monospace;
  --font-mono: "Share Tech Mono", "Courier New", monospace;
  --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0; --r-2xl: 0;  /* corners are for the timid */

  /* graph palette — cyber-zine (light) */
  --graph-current: #0e7490; --graph-visited: #c2148f; --graph-unvisited: #6b7280; --graph-tag: #b45309;
}

/* ---------- DARK · Matrix / GITS terminal ---------- */
:root[data-skin="90s"][data-theme="dark"] {
  --light: #030603;
  --lightgray: #0a3d1a; --gray: #00aa2e; --darkgray: #00ff41; --dark: #00e5ff;
  --secondary: #00ff41;            /* graph nodes + links — phosphor green */
  --tertiary: #ff2bd6;             /* graph tags — magenta */
  --highlight: #ff2bd6; --textHighlight: #00e5ff;
  --accent: var(--secondary); --accent-2: var(--textHighlight);   /* component accents follow this skin */

  --bg: #030603; --surface: #050d05; --surface-2: #08160a;
  --text: #00ff41; --text-muted: #00b32e; --text-faint: #068a2a;
  --border: #00ff41; --border-strong: #00e5ff;
  --primary: #ff2bd6; --on-primary: #000000;
  --focus-ring: #00e5ff;
  --info: #00e5ff; --success: #00ff41; --warning: #ffd500; --danger: #ff3860;

  /* graph palette — Matrix (dark): neon on black */
  --graph-current: #00e5ff; --graph-visited: #00ff41; --graph-unvisited: #068a2a; --graph-tag: #ff2bd6;
}

/* ---------- surfaces: base color + CRT scanlines ---------- */
:root[data-skin="90s"] body {
  background-color: #e9e8e3;
  background-image: repeating-linear-gradient(0deg, rgba(10,91,110,.05) 0 1px, transparent 1px 3px);
}
:root[data-skin="90s"][data-theme="dark"] body {
  background-color: #030603;
  background-image: repeating-linear-gradient(0deg, rgba(0,255,65,.06) 0 1px, transparent 1px 3px);
}

/* ---------- neon links ---------- */
:root[data-skin="90s"] a { text-decoration: underline; text-shadow: 0 0 4px currentColor; }
:root[data-skin="90s"] a:visited { color: #6b1f9e; }
:root[data-skin="90s"][data-theme="dark"] a:visited { color: #ff9df0; }

/* ---------- text selection ---------- */
:root[data-skin="90s"] ::selection { background: #ff2bd6; color: #000; }
:root[data-skin="90s"][data-theme="dark"] ::selection { background: #00ff41; color: #000; }

/* ---------- inline code: terminal chip (never bg==text) ---------- */
:root[data-skin="90s"] :not(pre) > code {
  background: #d8dcd8; color: #0a5b6e; border: 1px solid #0e7490;
}
:root[data-skin="90s"][data-theme="dark"] :not(pre) > code {
  background: #08160a; color: #00ff41; border-color: #00ff41;
}

/* ---------- chromatic-glitch headers ---------- */
:root[data-skin="90s"] h1, :root[data-skin="90s"] h2 {
  font-family: "Orbitron", sans-serif; letter-spacing: .04em; text-transform: uppercase;
  text-shadow: 2px 0 rgba(0,229,255,.7), -2px 0 rgba(255,43,214,.7);
}
:root[data-skin="90s"] h1 { animation: sz-90s-glitch 2.6s steps(2, end) infinite; }
@keyframes sz-90s-glitch {
  0%, 90%, 100% { text-shadow: 2px 0 rgba(0,229,255,.7), -2px 0 rgba(255,43,214,.7); }
  93% { text-shadow: -3px 0 rgba(0,229,255,.9), 3px 0 rgba(255,43,214,.9); }
  96% { text-shadow: 3px 0 rgba(0,229,255,.9), -3px 0 rgba(255,43,214,.9); }
}

/* ---------- scrolling terminal ticker (top) ---------- */
:root[data-skin="90s"] body::before {
  content: "> ACCESSING MAINFRAME\2026   \00BB GHOST IN THE SHELL   \00BB THE MATRIX HAS YOU   \00BB FOLLOW THE WHITE RABBIT   \00BB WAKE UP, SAMURAI   \00BB SYSTEM ONLINE   ";
  position: fixed; top: 0; left: 0; right: 0; z-index: 99999;
  background: #000; color: #00ff41;
  font: 14px "Share Tech Mono", "Courier New", monospace; white-space: nowrap; overflow: hidden;
  padding: 4px 0; border-bottom: 1px solid #00ff41; text-shadow: 0 0 6px #00ff41;
  animation: sz-90s-marquee 20s linear infinite;
}
@keyframes sz-90s-marquee { from { text-indent: 100%; } to { text-indent: -220%; } }

/* ---------- blinking terminal badge (bottom-right) ---------- */
:root[data-skin="90s"] body::after {
  content: "\25B6 CONNECTION SECURE \2588";
  position: fixed; bottom: 10px; right: 10px; z-index: 99999;
  background: #000; color: #00ff41; border: 1px solid #00ff41;
  padding: 4px 8px; font: 12px "Share Tech Mono", monospace; text-shadow: 0 0 6px #00ff41;
  animation: sz-90s-blink 1.1s steps(1, end) infinite;
}
@keyframes sz-90s-blink { 50% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
  :root[data-skin="90s"] body::before,
  :root[data-skin="90s"] body::after,
  :root[data-skin="90s"] h1 { animation: none; }
  :root[data-skin="90s"] body::before { text-indent: 0; }
}