/* Design tokens: palette, type, radii, shadows, and motion. Light is the default. Dark swaps the surface values. */
:root {
  --taskbar-h: 48px;
  --radius: 8px;
  --radius-sm: 4px;
  --radius-lg: 12px;
  --font: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Cascadia Mono", "Cascadia Code", Consolas, ui-monospace, Menlo, monospace;

  --accent: #0078d4;
  --accent-rgb: 0, 120, 212;
  --accent-text: #ffffff;
  --accent-hover: color-mix(in srgb, var(--accent) 88%, #000);
  --accent-press: color-mix(in srgb, var(--accent) 78%, #000);

  --canvas: #f3f3f3;
  --card: #ffffff;
  --card-hover: #f8f8f8;
  --layer: #fbfbfb;
  --titlebar: #f3f3f3;
  --text: #1b1b1b;
  --text-2: #5f5f5f;
  --text-3: #8a8a8a;
  --stroke: rgba(0, 0, 0, 0.08);
  --stroke-strong: rgba(0, 0, 0, 0.4);
  --control: #ffffff;
  --control-hover: #f6f6f6;
  --control-press: #efefef;
  --subtle: rgba(0, 0, 0, 0.06);
  --subtle-press: rgba(0, 0, 0, 0.11);
  --flyout: rgba(251, 251, 251, 0.92);
  --taskbar-bg: rgba(243, 243, 243, 0.8);
  --danger: #c42b1c;
  --danger-hover: #a52315;

  --shadow-flyout: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.14), 0 32px 64px rgba(0, 0, 0, 0.14);
  --shadow-window: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.18), 0 24px 56px rgba(0, 0, 0, 0.2);
  --shadow-inactive: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05);

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --canvas: #202020;
  --card: #2b2b2b;
  --card-hover: #323232;
  --layer: #2c2c2c;
  --titlebar: #202020;
  --text: #ffffff;
  --text-2: #c7c7c7;
  --text-3: #8f8f8f;
  --stroke: rgba(255, 255, 255, 0.08);
  --stroke-strong: rgba(255, 255, 255, 0.5);
  --control: #3a3a3a;
  --control-hover: #434343;
  --control-press: #2e2e2e;
  --subtle: rgba(255, 255, 255, 0.07);
  --subtle-press: rgba(255, 255, 255, 0.13);
  --flyout: rgba(44, 44, 44, 0.94);
  --taskbar-bg: rgba(30, 30, 30, 0.82);
  --shadow-flyout: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 8px 16px rgba(0, 0, 0, 0.35), 0 32px 64px rgba(0, 0, 0, 0.45);
  --shadow-window: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 8px 16px rgba(0, 0, 0, 0.4), 0 24px 56px rgba(0, 0, 0, 0.5);
  --shadow-inactive: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 4px 10px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
  color-scheme: dark;
}

/* With transparency off, frosted surfaces become solid. */
:root[data-transparency="off"] {
  --taskbar-bg: var(--canvas);
  --flyout: var(--layer);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  font: 14px/1.4 var(--font);
  color: var(--text);
  background: #000;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

input,
textarea,
.selectable {
  user-select: text;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.ico {
  width: 18px;
  height: 18px;
  flex: none;
  display: block;
}

.ico-img {
  object-fit: contain;
  user-select: none;
}

body.is-dragging,
body.is-dragging * {
  cursor: grabbing !important;
}

[data-motion="reduced"] *,
[data-motion="reduced"] *::before,
[data-motion="reduced"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}