/* ═══════════════════════════════════════════════════════════════════
   base.css — reset, Yaru design tokens, typography, layers
   ═══════════════════════════════════════════════════════════════════ */

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

html, body {
  margin: 0; padding: 0; height: 100%;
  overflow: hidden;
  background: #1d1611;
}

body {
  font-family: 'Ubuntu', 'Ubuntu Sans', Cantarell, 'Noto Sans', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overscroll-behavior: none;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
img { display: block; -webkit-user-drag: none; }
svg { display: block; flex: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, p { margin: 0; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent-bg); outline-offset: 1px; }

/* ── Ubuntu / Yaru palette ─────────────────────────────────────────── */
:root {
  --ubuntu-orange: #E95420;
  --ubuntu-aubergine: #772953;
  --ubuntu-dark-aubergine: #2C001E;
  --ubuntu-mid-aubergine: #5E2750;
  --ubuntu-warm-grey: #AEA79F;
  --ubuntu-cool-grey: #333333;
  --ubuntu-text-grey: #111111;

  /* accent (overwritten by theme.js) */
  --accent-bg: #E95420;
  --accent-fg: #ffffff;
  --accent-hl: #FF7A50;
  --accent-dim: rgba(233, 84, 32, .28);
  --accent-shell: #E95420;

  --success: #26A269;
  --warning: #E5A50A;
  --error: #E01B24;
  --destructive: #C01C28;

  /* shell metrics */
  --topbar-h: 32px;
  --dock-icon: 48px;
  --dock-pad: 8px;
  --dock-w: calc(var(--dock-icon) + 12px);
  --dock-gap: 6px;
  --radius-window: 12px;
  --radius-popover: 12px;
  --radius-menu: 10px;
  --radius-card: 10px;
  --radius-row: 8px;
  --radius-pill: 999px;

  /* shell (always-dark) surfaces */
  --shell-bg: rgba(26, 26, 26, .92);
  --shell-popover: #353535;
  --shell-popover-hover: rgba(255, 255, 255, .09);
  --shell-popover-active: rgba(255, 255, 255, .14);
  --shell-border: rgba(255, 255, 255, .12);
  --shell-fg: #ffffff;
  --shell-dim: rgba(255, 255, 255, .68);
  --shell-faint: rgba(255, 255, 255, .45);
  --shell-shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 28px rgba(0,0,0,.45);
  --shell-shadow-lg: 0 2px 6px rgba(0,0,0,.4), 0 24px 60px rgba(0,0,0,.55);

  /* motion */
  --t-fast: 120ms;
  --t-med: 200ms;
  --t-slow: 320ms;
  --ease: cubic-bezier(.25, .46, .45, .94);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --font-mono: 'Ubuntu Mono', 'Ubuntu Sans Mono', 'DejaVu Sans Mono', ui-monospace, monospace;
}

/* ── app window theming: light (Yaru) ──────────────────────────────── */
:root, [data-color-scheme="light"] {
  --win-bg: #fafafa;
  --win-fg: #2f2f2f;
  --win-fg-dim: rgba(47, 47, 47, .68);
  --win-fg-faint: rgba(47, 47, 47, .45);
  --view-bg: #ffffff;
  --view-alt: #f6f5f4;
  --headerbar-bg: #f5f4f2;
  --headerbar-bg-backdrop: #fafafa;
  --headerbar-border: rgba(0, 0, 0, .13);
  --sidebar-bg: #f0efee;
  --card-bg: #ffffff;
  --border: rgba(0, 0, 0, .11);
  --border-strong: rgba(0, 0, 0, .2);
  --hover: rgba(0, 0, 0, .055);
  --active: rgba(0, 0, 0, .11);
  --btn-bg: rgba(0, 0, 0, .07);
  --btn-bg-hover: rgba(0, 0, 0, .12);
  --btn-bg-active: rgba(0, 0, 0, .17);
  --entry-bg: rgba(0, 0, 0, .045);
  --entry-border: rgba(0, 0, 0, .17);
  --scrollbar: rgba(0, 0, 0, .28);
  --shadow-win: 0 0 0 1px rgba(0,0,0,.09), 0 4px 12px rgba(0,0,0,.14), 0 18px 48px rgba(0,0,0,.22);
  --shadow-win-focus: 0 0 0 1px rgba(0,0,0,.16), 0 8px 22px rgba(0,0,0,.22), 0 32px 80px rgba(0,0,0,.36);
  --shadow-popover: 0 1px 3px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.22);
  --title-fg: #232323;
  --code-bg: #f2f1f0;
}

/* ── app window theming: dark (Yaru-dark) ─────────────────────────── */
[data-color-scheme="dark"] {
  --win-bg: #242424;
  --win-fg: #ffffff;
  --win-fg-dim: rgba(255, 255, 255, .7);
  --win-fg-faint: rgba(255, 255, 255, .45);
  --view-bg: #1e1e1e;
  --view-alt: #2a2a2a;
  --headerbar-bg: #303030;
  --headerbar-bg-backdrop: #262626;
  --headerbar-border: rgba(0, 0, 0, .5);
  --sidebar-bg: #2a2a2a;
  --card-bg: #303030;
  --border: rgba(255, 255, 255, .1);
  --border-strong: rgba(255, 255, 255, .18);
  --hover: rgba(255, 255, 255, .07);
  --active: rgba(255, 255, 255, .13);
  --btn-bg: rgba(255, 255, 255, .1);
  --btn-bg-hover: rgba(255, 255, 255, .15);
  --btn-bg-active: rgba(255, 255, 255, .21);
  --entry-bg: rgba(0, 0, 0, .22);
  --entry-border: rgba(255, 255, 255, .14);
  --scrollbar: rgba(255, 255, 255, .3);
  --shadow-win: 0 0 0 1px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.4), 0 18px 48px rgba(0,0,0,.5);
  --shadow-win-focus: 0 0 0 1px rgba(0,0,0,.75), 0 8px 22px rgba(0,0,0,.5), 0 32px 80px rgba(0,0,0,.65);
  --shadow-popover: 0 1px 3px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.5);
  --title-fg: #ffffff;
  --code-bg: #1a1a1a;
}

/* ── the shell root ───────────────────────────────────────────────── */
.shell {
  position: fixed;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  contain: strict;
  background: #000;
}

.session {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 380ms var(--ease);
}
.shell.session-active .session { opacity: 1; pointer-events: auto; }

/* layers */
.layer { position: absolute; inset: 0; pointer-events: none; }
.layer > * { pointer-events: auto; }
.layer-banner    { z-index: 700; }
.layer-popover   { z-index: 760; }
.layer-switcher  { z-index: 780; }
.layer-menu      { z-index: 800; }
.layer-modal     { z-index: 820; }
.layer-osd       { z-index: 840; }
.layer-tooltip   { z-index: 860; }

#topbar  { z-index: 500; }
#dock    { z-index: 480; }
#dock-edge { z-index: 470; }
#overview { z-index: 400; }
#workspace-viewport { z-index: 200; }
#snap-preview { z-index: 460; }
#desktop { z-index: 100; }
#wallpaper { z-index: 10; }
.screen  { z-index: 900; }
.fx      { z-index: 950; pointer-events: none; }
#fx-fade { z-index: 980; }

/* ── wallpaper ────────────────────────────────────────────────────── */
.wallpaper-layer { position: absolute; inset: 0; overflow: hidden; background: #2c001e; }
.wp-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 520ms var(--ease), filter 420ms var(--ease), transform 620ms var(--ease-out);
  transform: scale(1.001);
}
.wp-img.on { opacity: 1; }
.shell.blur-wallpaper .wp-img { filter: blur(28px) saturate(1.1); transform: scale(1.06); }
.wp-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, rgba(0,0,0,.14));
  opacity: 0; transition: opacity 300ms var(--ease);
}
.shell.dim-wallpaper .wp-shade { opacity: 1; }

/* ── fx overlays ──────────────────────────────────────────────────── */
.fx-nightlight {
  position: absolute; inset: 0;
  background: linear-gradient(#ff8a2b, #ff7b17);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 900ms var(--ease);
}
.fx-nightlight.on { opacity: var(--nightlight-strength, .22); }
.fx-fade {
  position: absolute; inset: 0;
  background: #000; opacity: 0;
  transition: opacity 420ms var(--ease);
}
.fx-fade.on { opacity: 1; }
.fx-fade.instant { transition: none; }

/* ── accessibility helpers ────────────────────────────────────────── */
.shell.a11y-large-text { font-size: 16.8px; }
.shell.a11y-large-text .win, .shell.a11y-large-text .popover { font-size: 16.8px; }
.shell.a11y-contrast {
  --border: rgba(255,255,255,.55);
  --shell-border: rgba(255,255,255,.6);
  --win-fg-dim: rgba(255,255,255,.92);
}
[data-color-scheme="light"].shell.a11y-contrast,
.shell.a11y-contrast [data-color-scheme="light"] { --border: rgba(0,0,0,.6); }

.shell.reduce-motion *, .shell.reduce-motion *::before, .shell.reduce-motion *::after {
  transition-duration: 1ms !important;
  animation-duration: 1ms !important;
}

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

.noscript {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: #2c001e; color: #fff; font-size: 20px; text-align: center; padding: 40px;
  z-index: 9999;
}

/* ── scrollbars (Yaru overlay style) ──────────────────────────────── */
.scroller { overflow: auto; scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }
.scroller::-webkit-scrollbar { width: 12px; height: 12px; }
.scroller::-webkit-scrollbar-track { background: transparent; }
.scroller::-webkit-scrollbar-thumb {
  background: var(--scrollbar); border-radius: 999px;
  border: 3.5px solid transparent; background-clip: padding-box;
  min-height: 32px;
}
.scroller::-webkit-scrollbar-thumb:hover { background: var(--win-fg-dim); background-clip: padding-box; }
.scroller::-webkit-scrollbar-corner { background: transparent; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { width: 0; height: 0; }

/* text selection */
::selection { background: var(--accent-bg); color: var(--accent-fg); }
.selectable { user-select: text; -webkit-user-select: text; cursor: text; }

/* utility */
.flex { display: flex; }
.col { flex-direction: column; }
.center { align-items: center; }
.grow { flex: 1; min-width: 0; min-height: 0; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none !important; }
[hidden] { display: none !important; }