/* ============================================================
   chitOS 2000 — Base tokens + themes
   ============================================================ */

:root {
  /* Theme: beige (default, Win2K warm) */
  --desktop-bg: #c6b68a;
  --desktop-bg-2: #b9a877;
  --desktop-noise: rgba(120, 95, 50, 0.16);

  /* Window chrome */
  --chrome-face: #ece9d8;       /* XP luna beige face */
  --chrome-border: #0a246a;
  --chrome-shadow: rgba(0,0,0,0.35);
  --chrome-text: #ffffff;
  --win-body: #ece9d8;
  --win-text: #000000;
  --win-line: #aca899;
  --win-hl: #ffffff;
  --win-shadow-inner: #716f64;
  --win-sunken-bg: #ffffff;

  /* Titlebar gradient (XP luna blue by default? No — user said Win2K → XP, so keep blue luna available) */
  --tb-a: #0058e8;
  --tb-b: #2b82f2;
  --tb-c: #0650d8;
  --tb-inactive-a: #7a96df;
  --tb-inactive-b: #96aee6;

  /* Buttons */
  --btn-face: #ece9d8;
  --btn-hl: #ffffff;
  --btn-shadow: #716f64;
  --btn-dark: #3b3a32;

  /* Accent */
  --accent: #fa8200;          /* XP orange-ish */
  --accent-green: #3bd63b;

  /* Taskbar (XP luna blue) */
  --taskbar-a: #245edb;
  --taskbar-b: #3a6ee8;
  --taskbar-c: #1941a5;
  --start-a: #3c8f1d;
  --start-b: #5fb73b;
  --start-c: #2a6a13;
  --start-text: #ffffff;

  /* Icons on desktop — label */
  --icon-label: #111111;
  --icon-label-bg: rgba(255, 255, 255, 0);
  --icon-label-selected-bg: #316ac5;
  --icon-label-selected: #ffffff;

  /* Typography */
  --ff-ui: "Tahoma", "Geneva", "Verdana", sans-serif;
  --ff-title: "Trebuchet MS", "Tahoma", sans-serif;
  --ff-mono: "Lucida Console", "Consolas", ui-monospace, monospace;
  --ff-pixel: "VT323", "Courier New", monospace;

  --crt-opacity: 0;
  --scanline-opacity: 0;

  color-scheme: light;
}

/* -- Theme: luna (XP-pure blue desktop, bright) -- */
[data-theme="luna"] {
  --desktop-bg: #5b7e9a;
  --desktop-bg-2: #3d6079;
  --desktop-noise: rgba(255, 255, 255, 0.04);
  --chrome-face: #ece9d8;
  --win-body: #ffffff;
  --tb-a: #0058e8;
  --tb-b: #2b82f2;
  --tb-c: #0650d8;
}

/* -- Theme: crt (dark amber/green CRT) -- */
[data-theme="crt"] {
  --desktop-bg: #0b1410;
  --desktop-bg-2: #07100b;
  --desktop-noise: rgba(59, 214, 59, 0.04);
  --chrome-face: #0f1a13;
  --chrome-border: #1e2d21;
  --win-body: #0a130d;
  --win-text: #6cff6c;
  --win-line: #1e3a24;
  --win-hl: #1a2d1f;
  --win-shadow-inner: #0a130d;
  --win-sunken-bg: #050a06;
  --tb-a: #0f2512;
  --tb-b: #1a3a1f;
  --tb-c: #0a1a0d;
  --tb-inactive-a: #0f2512;
  --tb-inactive-b: #1a3a1f;
  --btn-face: #0f1a13;
  --btn-hl: #2a4d32;
  --btn-shadow: #050a06;
  --btn-dark: #000;
  --icon-label: #6cff6c;
  --icon-label-selected-bg: #1d4b22;
  --icon-label-selected: #8fff8f;
  --taskbar-a: #0f2512;
  --taskbar-b: #1a3a1f;
  --taskbar-c: #0a1a0d;
  --start-a: #6cff6c;
  --start-b: #8fff8f;
  --start-c: #3bd63b;
  --start-text: #000;
  --chrome-text: #a8ffa8;
  --accent: #ffaa00;
  --scanline-opacity: 0.35;
  --crt-opacity: 0.5;
  color-scheme: dark;
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  height: 100%;
  font-family: var(--ff-ui);
  font-size: 12px;
  color: var(--win-text);
  overflow: hidden;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  background: #000;
}

button { font: inherit; color: inherit; }
a { color: inherit; }

/* ============================================================
   Desktop
   ============================================================ */
#desktop {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 35%, var(--desktop-bg) 0%, var(--desktop-bg-2) 100%);
  overflow: hidden;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='24' viewBox='0 0 20 24'><path d='M2 2 L2 18 L6 14 L9 21 L12 20 L9 13 L15 13 Z' fill='white' stroke='black' stroke-width='1.2' stroke-linejoin='round'/></svg>") 2 2, auto;
}

/* Warm noise / grain on top of desktop */
#desktop::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, var(--desktop-noise) 1px, transparent 1.5px),
    radial-gradient(circle at 5px 7px, var(--desktop-noise) 1px, transparent 1.5px);
  background-size: 7px 7px, 11px 11px;
  mix-blend-mode: multiply;
  opacity: 0.6;
  pointer-events: none;
}

/* Faint diagonal texture */
#desktop::after {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg,
      transparent 0 6px,
      rgba(0,0,0,0.015) 6px 7px);
  pointer-events: none;
}

/* ============================================================
   Icons
   ============================================================ */
.icon-col {
  position: absolute;
  top: 16px;
  bottom: 50px;
  width: 110px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 8px 4px;
  z-index: 5;
}
.icon-col.left  { left: 4px; }
.icon-col.right { right: 4px; }

.desk-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 2px 6px;
  border-radius: 2px;
  cursor: pointer;
  text-align: center;
  color: var(--icon-label);
  transition: transform 0.15s cubic-bezier(.2,1.4,.4,1);
  position: relative;
}
.desk-icon .ico-img {
  width: 60px; height: 60px;
  transition: transform 0.25s ease;
  filter: drop-shadow(2px 3px 0 rgba(0,0,0,0.18));
}
.desk-icon .ico-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.15;
  padding: 2px 6px;
  border-radius: 2px;
  background: var(--icon-label-bg);
  text-shadow: 1px 1px 0 rgba(255,255,255,0.55);
  max-width: 100px;
  word-break: break-word;
  margin-top: 2px;
}
[data-theme="crt"] .desk-icon .ico-label {
  text-shadow: 0 0 4px rgba(108,255,108,0.9);
}
.desk-icon:hover .ico-img {
  transform: translateY(-2px) scale(1.06);
}
.desk-icon.selected .ico-label {
  background: var(--icon-label-selected-bg);
  color: var(--icon-label-selected);
  outline: 1px dotted rgba(255,255,255,0.5);
}

/* ============================================================
   Post-it note on desktop
   ============================================================ */
.postit {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 260px;
  background: linear-gradient(180deg, #fff37a 0%, #fde457 100%);
  color: #3a2e00;
  padding: 14px 16px 16px;
  box-shadow:
    1px 1px 0 rgba(0,0,0,0.08),
    4px 6px 14px rgba(0,0,0,0.22);
  font-family: "Courier New", monospace;
  z-index: 4;
  pointer-events: none;
  font-size: 12px;
  line-height: 1.35;
}
.postit::before {
  content: "";
  position: absolute;
  top: -6px; left: 50%; transform: translateX(-50%);
  width: 70px; height: 14px;
  background: rgba(255,240,150,0.65);
  border: 1px solid rgba(180,140,0,0.25);
}
.postit h4 {
  margin: 0 0 6px; font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; color: #6b4a00;
}
.postit ul { margin: 0; padding-left: 16px; }
.postit li { margin-bottom: 2px; }

/* ============================================================
   CRT overlay
   ============================================================ */
#crt-overlay {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: var(--crt-opacity);
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
  mix-blend-mode: multiply;
}
#scanlines {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: var(--scanline-opacity);
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.22) 0px,
    rgba(0,0,0,0.22) 1px,
    transparent 1px,
    transparent 3px
  );
}