:root {
  --bg: #0e0e12;
  --bg2: #12121a;
  --fg: #e8e6ea;
  --dim: #6b6974;
  --muted: #9c98b0;
  --accent: #c7a2ff;
  --pink: #ff9dd2;
  --green: #9be0a8;
  --win: #16161e;
  --win-a: rgba(22,22,30,.85);
  --win-border: #262634;
  --term-bg: #13131a;
  --term-bg-a: rgba(19,19,26,.72);
  --red: #ff5f57;
  --yellow: #febc2e;
  --green-dot: #28c840;
  --surface2: #1c1c26;
  --surface2-a: rgba(28,28,38,.62);
  --bar: rgba(14,14,18,.85);
  --btn: rgba(255,255,255,.04);
  --btn-hover: rgba(255,255,255,.1);
  --hover: rgba(255,255,255,.06);
  --active: color-mix(in srgb, var(--accent) 22%, transparent);
  --active2: color-mix(in srgb, var(--accent) 16%, transparent);
  --glow: color-mix(in srgb, var(--accent) 22%, transparent);
  --ov1: rgba(42,33,64,.35);
  --ov2: rgba(28,36,54,.4);
  --ov3: rgba(0,0,0,.25);
  --shadow: rgba(0,0,0,.5);
  --shadow2: rgba(0,0,0,.55);
}

html[data-theme="light"] {
  --bg: #f3f1f8;
  --bg2: #eae8f2;
  --fg: #201d2b;
  --dim: #7b7890;
  --muted: #5a576e;
  --win: #ffffff;
  --win-a: rgba(255,255,255,.85);
  --win-border: #d6d3e2;
  --term-bg: #f7f6fb;
  --term-bg-a: rgba(247,246,251,.75);
  --surface2: #eceaf4;
  --surface2-a: rgba(236,234,244,.62);
  --pink: #d63384;
  --green: #1f9d55;
  --yellow: #b58900;
  --bar: rgba(250,249,253,.85);
  --btn: rgba(0,0,0,.05);
  --btn-hover: rgba(0,0,0,.09);
  --hover: rgba(0,0,0,.06);
  --ov1: rgba(150,140,200,.18);
  --ov2: rgba(210,200,240,.25);
  --ov3: rgba(255,255,255,.15);
  --shadow: rgba(30,25,50,.22);
  --shadow2: rgba(30,25,50,.28);
}

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  line-height: 1.55;
  overflow: hidden;
  user-select: none;
}

.hidden { display: none !important; }

[data-motion="off"] *,
[data-motion="off"] *::before,
[data-motion="off"] *::after {
  animation: none !important;
  transition: none !important;
}

[data-blur="off"] #taskbar {
  backdrop-filter: none;
  background: var(--bg2);
}

[data-blur="off"] .win,
[data-blur="off"] .win-titlebar,
[data-blur="off"] .win-body {
  backdrop-filter: none;
}
[data-blur="off"] .win { background: var(--win); }
[data-blur="off"] .win-titlebar { background: var(--surface2); }
[data-blur="off"] .win-body { background: var(--term-bg); }

[data-corners="off"] .win,
[data-corners="off"] .win-titlebar,
[data-corners="off"] .win-body,
[data-corners="off"] .win-dot,
[data-corners="off"] .task-btn,
[data-corners="off"] .tile,
[data-corners="off"] .st-card,
[data-corners="off"] .st-art,
[data-corners="off"] .st-pbar,
[data-corners="off"] .st-fl a,
[data-corners="off"] .swatch,
[data-corners="off"] .custom-color,
[data-corners="off"] .theme-btn,
[data-corners="off"] .set-row,
[data-corners="off"] .set-toggle,
[data-corners="off"] .set-toggle::after,
[data-corners="off"] .set-wp-thumb,
[data-corners="off"] .set-nav-btn,
[data-corners="off"] .set-card,
[data-corners="off"] .set-seg,
[data-corners="off"] .set-seg button,
[data-corners="off"] .set-reset,
[data-corners="off"] .set-wp-cell,
[data-corners="off"] .set-wall,
[data-corners="off"] .files-row,
[data-corners="off"] .files-dir,
[data-corners="off"] .boot-fill,
[data-corners="off"] .st-ptime {
  border-radius: 0 !important;
}

/* ---------- desktop ---------- */

#desktop {
  position: fixed; inset: 0;
  background: var(--bg);
}

#wallpaper {
  position: absolute; inset: 0;
}

html[data-theme="light"] #wallpaper {
  opacity: 0.35;
}

#desktop::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--ov1) 0%, transparent 60%),
    radial-gradient(900px 500px at 0% 110%, var(--ov2) 0%, transparent 60%),
    var(--ov3);
}

#windows { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }