/* ─────────────────────────────────────────────────────────────
   MOOD COMMUTE · design tokens
   Cyberpunk CRT base + 80s Japanese VHS neon accents
   ───────────────────────────────────────────────────────────── */

:root {
  /* surfaces */
  --bg-0:        #07050d;   /* the void behind everything */
  --bg-1:        #0d0a1c;   /* main panel */
  --bg-2:        #15102b;   /* raised panel / card */
  --bg-3:        #1c1638;   /* hover / focus */
  --chrome:      #2a2156;   /* keyline */

  /* ink */
  --ink:         #e8efff;
  --ink-soft:    #c8d2ee;
  --ink-mute:    #7a85b0;
  --ink-dim:     #4a5174;

  /* CRT neon primaries */
  --neon-pink:   #ff2cd4;   /* hot magenta — primary */
  --neon-cyan:   #00eaff;   /* phosphor cyan */
  --neon-lime:   #b6ff39;   /* CRT green-yellow */
  --neon-green:  #39ff14;   /* alarm green */
  --neon-red:    #ff2d4f;   /* alert / JR red */
  --neon-yellow: #ffe55c;   /* sodium amber */
  --neon-violet: #b066ff;   /* bladerunner haze */
  --neon-blue:   #4a8bf5;
  --neon-orange: #ff7a1a;

  /* 8 emotions — neon mapped */
  --e-stress:     #ff2d4f;
  --e-joy:        #ff2cd4;
  --e-fatigue:    #b066ff;
  --e-loneliness: #4a8bf5;
  --e-anger:      #ff7a1a;
  --e-awe:        #00eaff;
  --e-boredom:    #5e6b88;
  --e-calm:       #39ff14;

  /* radii — keep sharp; just a hair softened */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 10px;

  /* type stacks */
  --f-display: "Bebas Neue", "DIN Condensed", "Oswald", sans-serif;
  --f-tech:    "Major Mono Display", "VT323", "Courier New", monospace;
  --f-mono:    "VT323", "JetBrains Mono", "Courier New", monospace;
  --f-pixel:   "DotGothic16", "Press Start 2P", monospace;
  --f-jp:      "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-jp-sans: "DotGothic16", "Hiragino Sans", sans-serif;
  --f-body:    "Shippori Mincho B1", "Hiragino Mincho ProN", serif;
  --f-ui:      "Bebas Neue", system-ui, sans-serif;

  /* shadows / glows */
  --glow-pink: 0 0 12px rgba(255,44,212,.6), 0 0 24px rgba(255,44,212,.35);
  --glow-cyan: 0 0 12px rgba(0,234,255,.6), 0 0 24px rgba(0,234,255,.35);
  --glow-lime: 0 0 10px rgba(182,255,57,.5);
}

/* ─────────────────────────────────────────────────────────────
   Base
   ───────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
}

/* ─────────────────────────────────────────────────────────────
   CRT effects — scanlines, vignette, bloom, chromatic aberration
   ───────────────────────────────────────────────────────────── */
.crt-scanlines {
  position: relative;
}
.crt-scanlines::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,.28) 3px,
    rgba(0,0,0,0) 4px
  );
  z-index: 50;
  mix-blend-mode: multiply;
}
.crt-vignette::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 50%, rgba(0,0,0,.55) 100%);
  z-index: 49;
}
.crt-noise::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .25;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .9 0 0 0 0 .9 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  z-index: 48;
}
.chroma-aberration {
  text-shadow:
    1.5px 0 0 rgba(255,44,212,.65),
   -1.5px 0 0 rgba(0,234,255,.65);
}
.chroma-soft {
  text-shadow:
    1px 0 0 rgba(255,44,212,.5),
   -1px 0 0 rgba(0,234,255,.5);
}

/* a thin neon keyline frame for panels */
.neon-frame {
  border: 1px solid var(--chrome);
  background: linear-gradient(180deg, rgba(28,22,56,.65) 0%, rgba(13,10,28,.85) 100%);
  position: relative;
}
.neon-frame::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,234,255,.07) 0%, transparent 16%),
    linear-gradient(0deg, rgba(255,44,212,.05) 0%, transparent 18%);
}

/* corner-cut clip (cyberpunk hard-edge) */
.cut-corners {
  clip-path: polygon(0 8px, 8px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 14px 100%, 0 calc(100% - 14px));
}

/* a kbd-style label chip */
.kbd {
  font-family: var(--f-mono);
  font-size: 13px;
  background: var(--ink);
  color: var(--bg-0);
  padding: 0px 6px;
  border-radius: 2px;
  letter-spacing: .04em;
  line-height: 1.3;
}

/* scrolled containers — invisible scrollbar */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* keyframes */
@keyframes rec-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.2; }
}
@keyframes flicker {
  0%, 100% { opacity: 1; }
  50%      { opacity: .85; }
  72%      { opacity: 1; }
  78%      { opacity: .92; }
}
@keyframes scan-roll {
  from { background-position: 0 0; }
  to   { background-position: 0 200px; }
}
@keyframes pulse-ring {
  0%   { transform: scale(.9); opacity: .7; }
  100% { transform: scale(2.2); opacity: 0; }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}