/* ============================================================
   GLITCH & TONIC — 设计系统 Token
   VA-11 Hall-A 风格像素设计系统
   所有颜色/尺寸/字体一律走 CSS 变量，禁止硬编码色值
   ============================================================ */

:root {
  /* ---------- 字体 ---------- */
  /* 像素字体栈：Zpix / 缝合怪像素 / Fusion Pixel，缺失时回退等宽 */
  --font-pixel: "Zpix", "Fusion Pixel 12px monospaced", "Fusion Pixel",
    "Pixel-Int", "SimSun-ExtB", "Courier New", monospace;
  --font-ui: "Zpix", "Fusion Pixel 12px monospaced", "Courier New", monospace;

  /* ---------- 字号阶梯（像素风建议 2px 递进） ---------- */
  --text-xs: 0.625rem;   /* 10px */
  --text-sm: 0.75rem;    /* 12px */
  --text-base: 0.875rem; /* 14px */
  --text-lg: 1rem;       /* 16px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 2rem;      /* 32px */
  --text-display: 2.5rem;/* 40px 站名 */

  /* ---------- 间距系统（4px 网格） ---------- */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */

  /* ---------- 像素单位 ---------- */
  --px: 2px;             /* 像素边框基础单位 */
  --pixel-border-w: 2px;
  --scanline-size: 4px;  /* CRT 扫描线周期 */

  /* ---------- 布局容器 ---------- */
  --container-sm: 640px;
  --container-md: 800px;
  --container-lg: 960px;
  --container-xl: 1120px;

  /* ---------- 动效 ---------- */
  --ease-pixel: steps(4, end);      /* 像素风用 steps 而非平滑曲线 */
  --ease-out: cubic-bezier(0.2, 0.9, 0.3, 1);
  --dur-fast: 0.15s;
  --dur-mid: 0.3s;
  --dur-slow: 0.6s;

  /* ---------- 层级 ---------- */
  --z-bg: 0;
  --z-content: 10;
  --z-panel: 20;
  --z-nav: 50;
  --z-crt: 90;      /* 扫描线覆盖层 */
  --z-dialog: 80;
}

/* ============================================================
   暗色主题（默认视觉 = 深夜酒吧）
   ============================================================ */
:root,
[data-theme="dark"] {
  --bg-primary: #0d0a14;      /* 深夜底 */
  --bg-secondary: #171123;    /* 面板底 */
  --bg-tertiary: #221833;     /* 面板高亮区 */
  --bg-inset: #0a0810;        /* 内凹（对话框底） */

  --text-primary: #f0e6d2;    /* 暖白 */
  --text-secondary: #a89cc0;  /* 灰紫 */
  --text-muted: #6b5f80;

  --border-color: #3d2f55;
  --border-bright: #5a4a7a;

  /* 霓虹品牌色 */
  --neon-pink: #ff5d8f;       /* 主强调：霓虹粉 */
  --neon-cyan: #5df7ff;       /* 次强调：CRT 青 */
  --neon-amber: #ffb454;      /* 酒液琥珀 */
  --neon-violet: #b57dff;     /* 紫 */
  --neon-green: #7dff9e;      /* 成功/在线 */

  --primary-500: var(--neon-pink);
  --primary-glow: rgba(255, 93, 143, 0.55);
  --cyan-glow: rgba(93, 247, 255, 0.45);

  --shadow-panel: 0 4px 0 0 #000000;
  --shadow-glow: 0 0 8px var(--primary-glow);

  --scanline-opacity: 0.10;
  --rain-opacity: 0.14;
  --vignette-opacity: 0.55;

  color-scheme: dark;
}

/* ============================================================
   亮色主题（白天霓虹城 / 打印小票风）
   ============================================================ */
[data-theme="light"] {
  --bg-primary: #f3ecdd;      /* 米黄纸底 */
  --bg-secondary: #fffaf0;
  --bg-tertiary: #f7eed8;
  --bg-inset: #e8dfc8;

  --text-primary: #2a2035;
  --text-secondary: #5d5070;
  --text-muted: #8a7d99;

  --border-color: #c9b8a0;
  --border-bright: #8f7a5e;

  --neon-pink: #d6305f;       /* 亮底下加深保证对比度 */
  --neon-cyan: #0e8a96;
  --neon-amber: #b06e10;
  --neon-violet: #7a3fc0;
  --neon-green: #2e8b46;

  --primary-500: var(--neon-pink);
  --primary-glow: rgba(214, 48, 95, 0.35);
  --cyan-glow: rgba(14, 138, 150, 0.3);

  --shadow-panel: 0 4px 0 0 rgba(90, 70, 40, 0.35);
  --shadow-glow: 0 0 6px var(--primary-glow);

  --scanline-opacity: 0.05;
  --rain-opacity: 0.06;
  --vignette-opacity: 0.15;

  color-scheme: light;
}

/* ============================================================
   跟随系统（仅当用户未手动选择时生效）
   ============================================================ */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    --bg-primary: #f3ecdd;
    --bg-secondary: #fffaf0;
    --bg-tertiary: #f7eed8;
    --bg-inset: #e8dfc8;
    --text-primary: #2a2035;
    --text-secondary: #5d5070;
    --text-muted: #8a7d99;
    --border-color: #c9b8a0;
    --border-bright: #8f7a5e;
    --neon-pink: #d6305f;
    --neon-cyan: #0e8a96;
    --neon-amber: #b06e10;
    --neon-violet: #7a3fc0;
    --neon-green: #2e8b46;
    --primary-glow: rgba(214, 48, 95, 0.35);
    --cyan-glow: rgba(14, 138, 150, 0.3);
    --shadow-panel: 0 4px 0 0 rgba(90, 70, 40, 0.35);
    --scanline-opacity: 0.05;
    --rain-opacity: 0.06;
    --vignette-opacity: 0.15;
    color-scheme: light;
  }
}

/* ============================================================
   降低动效偏好 — 全局关闭动画
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* 用户手动关动效（设置面板 / data 属性） */
[data-motion="off"] *,
[data-motion="off"] *::before,
[data-motion="off"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

/* ============================================================
   基础排版与全局样式
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  /* 像素字体在小字号下模糊，禁止次像素抗锯齿 */
  -webkit-font-smoothing: none;
  font-smooth: never;
  text-rendering: optimizeSpeed;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.7;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color var(--dur-mid) var(--ease-out),
              color var(--dur-mid) var(--ease-out);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-pixel);
  line-height: 1.3;
  margin: 0 0 var(--space-4);
  letter-spacing: 0.05em;
}

a {
  color: var(--neon-cyan);
  text-decoration: none;
}
a:hover { color: var(--neon-pink); }

:focus-visible {
  outline: 2px dashed var(--neon-cyan);
  outline-offset: 2px;
}

::selection {
  background: var(--neon-pink);
  color: var(--bg-primary);
}

/* 像素风滚动条 */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--bg-inset); }
::-webkit-scrollbar-thumb {
  background: var(--border-bright);
  border: 2px solid var(--bg-inset);
}
::-webkit-scrollbar-thumb:hover { background: var(--neon-pink); }