@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/ubuntu-400.woff2") format("woff2");
}
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/ubuntu-500.woff2") format("woff2");
}
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/ubuntu-700.woff2") format("woff2");
}
@font-face {
  font-family: "Ubuntu Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/ubuntumono-400.woff2") format("woff2");
}
@font-face {
  font-family: "Ubuntu Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/ubuntumono-700.woff2") format("woff2");
}

:root {
  --orange: #e95420;
  --aubergine: #924d8b;
  --light-aubergine: #77216f;
  --mid-aubergine: #5e2750;
  --dark-aubergine: #2c001e;
  --purple: #762572;
  --warm-grey: #aea79f;
  --cool-grey: #333333;
  --porcelain: #f7f7f7;
  --silk: #ccc;
  --ash: #888780;
  --white: #ffffff;
  --black: #000000;

  --accent: #e95420;
  --accent-hover: #ff6a36;
  --accent-press: #c74315;
  --accent-soft: color-mix(in srgb, var(--accent) 22%, transparent);
  --accent-fg: #ffffff;

  --topbar-h: 32px;
  --dock-icon: 48px;
  --dock-pad: 8px;
  --titlebar-h: 46px;
  --win-radius: 12px;
  --panel-radius: 16px;
  --ctrl-size: 16px;

  --font: "Ubuntu", "Ubuntu Sans", Cantarell, "Noto Sans", system-ui, sans-serif;
  --mono: "Ubuntu Mono", ui-monospace, "Liberation Mono", monospace;

  --snap-duration: 180ms;
  --win-duration: 160ms;
  --overview-duration: 220ms;

  color-scheme: dark;
}

html[data-accent="orange"] { --accent: #e95420; --accent-hover: #ff6a36; --accent-press: #c74315; }
html[data-accent="bark"] { --accent: #787859; --accent-hover: #8e8e6c; --accent-press: #5f5f45; }
html[data-accent="sage"] { --accent: #657b69; --accent-hover: #7a927e; --accent-press: #516354; }
html[data-accent="olive"] { --accent: #4b8501; --accent-hover: #5ea201; --accent-press: #3a6801; }
html[data-accent="viridian"] { --accent: #03875b; --accent-hover: #04a36e; --accent-press: #026b48; }
html[data-accent="prussian"] { --accent: #308280; --accent-hover: #3c9c9a; --accent-press: #266866; }
html[data-accent="blue"] { --accent: #0073e5; --accent-hover: #1b86f0; --accent-press: #005bb8; }
html[data-accent="purple"] { --accent: #7764d8; --accent-hover: #8b7ae0; --accent-press: #5f4ec0; }
html[data-accent="magenta"] { --accent: #b34cb3; --accent-hover: #c462c4; --accent-press: #933d93; }
html[data-accent="red"] { --accent: #da3450; --accent-hover: #e74b64; --accent-press: #b52840; }
html[data-accent="yellow"] { --accent: #c88800; --accent-hover: #e09a00; --accent-press: #a06d00; }

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1e1e1e;
  --bg-alt: #2b2b2b;
  --bg-raised: #303030;
  --bg-overlay: rgba(36, 36, 36, 0.92);
  --bg-popover: rgba(40, 40, 40, 0.96);
  --bg-dock: rgba(28, 28, 28, 0.78);
  --bg-topbar: rgba(20, 20, 20, 0.88);
  --bg-header: #2c2c2c;
  --bg-input: #3d3d3d;
  --bg-hover: rgba(255, 255, 255, 0.08);
  --bg-active: rgba(255, 255, 255, 0.14);
  --bg-selected: color-mix(in srgb, var(--accent) 28%, #2a2a2a);
  --fg: #eeeeec;
  --fg-dim: #c0bfbc;
  --fg-muted: #9a9996;
  --fg-faint: #77767b;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  --shadow-win: 0 14px 48px rgba(0, 0, 0, 0.52), 0 2px 8px rgba(0, 0, 0, 0.28);
  --shadow-pop: 0 8px 28px rgba(0, 0, 0, 0.5);
  --win-bg: #242424;
  --win-header: #2d2d2d;
  --win-unfocused: #262626;
  --scrollbar: #5a5a5a;
  --desktop-icon-fg: #f6f5f4;
  --osd-bg: rgba(36, 36, 36, 0.88);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #fafafa;
  --bg-alt: #ffffff;
  --bg-raised: #ffffff;
  --bg-overlay: rgba(250, 250, 250, 0.94);
  --bg-popover: rgba(255, 255, 255, 0.97);
  --bg-dock: rgba(246, 245, 244, 0.82);
  --bg-topbar: rgba(36, 31, 49, 0.88);
  --bg-header: #ebebeb;
  --bg-input: #ffffff;
  --bg-hover: rgba(0, 0, 0, 0.06);
  --bg-active: rgba(0, 0, 0, 0.1);
  --bg-selected: color-mix(in srgb, var(--accent) 22%, #ffffff);
  --fg: #241f31;
  --fg-dim: #3d3846;
  --fg-muted: #5e5c64;
  --fg-faint: #9a9996;
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.14);
  --shadow: 0 10px 36px rgba(0, 0, 0, 0.18);
  --shadow-win: 0 14px 42px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.12);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.18);
  --win-bg: #fafafa;
  --win-header: #ebebeb;
  --win-unfocused: #f3f3f3;
  --scrollbar: #c0bfbc;
  --desktop-icon-fg: #f6f5f4;
  --osd-bg: rgba(250, 250, 250, 0.9);
}

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

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.35;
  color: var(--fg);
  background: #0b0b0b;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

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

button {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

img, svg { display: block; max-width: 100%; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::selection {
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  color: #fff;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --snap-duration: 1ms;
    --win-duration: 1ms;
    --overview-duration: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}