/* =========================================================
   THEMES.CSS
   Toàn bộ màu sắc của OS được điều khiển bằng CSS variables.
   Muốn thêm theme mới: copy 1 khối [data-theme="..."] bên dưới,
   đổi tên và đổi màu, rồi thêm <option> trong index.html (#theme-select).
   ========================================================= */

:root {
  /* ---- THEME MẶC ĐỊNH: NOIR MONO ---- */
  --bg-color: #0a0a0a;
  --main-color: #ffffff;
  --dim-color: #4d4d4d;
  --dark-color: #1a1a1a;
  --window-bg: #121212;
  --border-color: #ffffff;
  --text-accent: #cfcfcf;

  --font-pixel-title: 'Press Start 2P', cursive;
  --font-pixel-body: 'VT323', monospace;
  --font-mono-readable: 'Space Mono', monospace;
  --base-font-size: 20px;
}

[data-theme="matrix"] {
  --bg-color: #030a03;
  --main-color: #38ff38;
  --dim-color: #126612;
  --dark-color: #082b08;
  --window-bg: #071907;
  --border-color: #38ff38;
  --text-accent: #a3ffa3;
}

[data-theme="cyberpink"] {
  --bg-color: #0d0614;
  --main-color: #ff2a8d;
  --dim-color: #8b004f;
  --dark-color: #21031c;
  --window-bg: #150524;
  --border-color: #ff2a8d;
  --text-accent: #ff80df;
}

[data-theme="amber"] {
  --bg-color: #140b00;
  --main-color: #ffb000;
  --dim-color: #805800;
  --dark-color: #3a2800;
  --window-bg: #1e1100;
  --border-color: #ffb000;
  --text-accent: #ffe082;
}

[data-theme="win95"] {
  --bg-color: #008080;
  --main-color: #000000;
  --dim-color: #000080;
  --dark-color: #d4d0c8;
  --window-bg: #ece9d8;
  --border-color: #000000;
  --text-accent: #000080;
}

/* ---- FONT SIZE TOGGLE ---- */
body.large-text {
  --base-font-size: 26px;
}

/* ---- CRT SCANLINE OVERLAY (toggle bằng class .crt-on trên <body>) ---- */
body.crt-on::before {
  content: " ";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
    linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
  background-size: 100% 3px, 3px 100%;
  z-index: 9999;
  pointer-events: none;
}

body.crt-on {
  animation: crtFlicker 6s infinite;
}

@keyframes crtFlicker {
  0%, 96%, 100% { filter: brightness(1); }
  97% { filter: brightness(1.03); }
  98% { filter: brightness(0.98); }
}