@layer reset, tokens, desktop, components, motion, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
  button, input, textarea, select { font: inherit; color: inherit; }
  button { border: 0; padding: 0; background: none; }
  button, [role="button"] { -webkit-tap-highlight-color: transparent; }
  svg { width: 1em; height: 1em; fill: currentColor; display: block; }
  [hidden] { display: none !important; }
  ::selection { color: white; background: color-mix(in srgb, var(--accent) 76%, transparent); }
}

@layer tokens {
  :root {
    color-scheme: dark;
    font-family: "Segoe UI Variable Text", "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-synthesis: none;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;

    --accent: #70e8ff;
    --accent-rgb: 112, 232, 255;
    --accent-2: #a88cff;
    --mint: #75f0c7;
    --coral: #ff8b9e;
    --amber: #ffc86a;
    --ink: #f7fbff;
    --ink-2: rgba(240, 248, 255, 0.84);
    --ink-3: rgba(222, 235, 246, 0.68);
    --ink-4: rgba(205, 224, 239, 0.52);
    --dark: #06101c;
    --dark-2: #0a1422;
    --hairline: rgba(255, 255, 255, 0.085);
    --hairline-strong: rgba(255, 255, 255, 0.15);
    --hairline-dark: rgba(0, 0, 0, 0.25);
    --glass-fill: rgba(10, 18, 31, 0.62);
    --glass-fill-strong: rgba(10, 17, 29, 0.78);
    --glass-fill-soft: rgba(15, 25, 40, 0.48);
    --content-fill: rgba(11, 20, 33, 0.9);
    --sidebar-fill: rgba(12, 21, 34, 0.74);
    --popover-fill: rgba(9, 16, 28, 0.77);
    --window-border: rgba(255, 255, 255, 0.15);
    --window-border-focus: rgba(190, 242, 255, 0.24);
    --surface: rgba(255, 255, 255, 0.055);
    --surface-hover: rgba(255, 255, 255, 0.09);
    --surface-active: rgba(var(--accent-rgb), 0.14);
    --shadow-window: 0 40px 100px rgba(0, 5, 14, 0.48), 0 12px 32px rgba(0, 3, 10, 0.3), inset 0 1px 0 rgba(255,255,255,.08);
    --shadow-panel: 0 24px 64px rgba(0, 4, 12, 0.42), 0 4px 14px rgba(0, 4, 12, 0.25), inset 0 1px 0 rgba(255,255,255,.08);
    --shadow-float: 0 14px 36px rgba(0, 5, 15, .32), inset 0 1px 0 rgba(255,255,255,.06);
    --blur-window: 34px;
    --blur-panel: 38px;
    --blur-dock: 30px;
    --radius-window: 20px;
    --radius-panel: 18px;
    --radius-control: 11px;
    --radius-small: 8px;
    --topbar-height: 44px;
    --dock-size: 68px;
    --dock-scale: 1;
    --brightness: .94;
    --ui-scale: 1;
    --wallpaper-hue: 0deg;
    --wallpaper-zoom: 1;
    --spring: cubic-bezier(.2, .86, .22, 1.14);
    --spring-soft: cubic-bezier(.2, .78, .18, 1);
    --ease-out: cubic-bezier(.2, .72, .24, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --fast: 120ms;
    --normal: 190ms;
    --slow: 320ms;
  }

  .desktop[data-theme="light"] {
    color-scheme: light;
    --ink: #102033;
    --ink-2: rgba(18, 37, 57, .84);
    --ink-3: rgba(27, 48, 68, .68);
    --ink-4: rgba(35, 58, 78, .56);
    --glass-fill: rgba(238, 246, 252, .62);
    --glass-fill-strong: rgba(244, 249, 253, .82);
    --glass-fill-soft: rgba(240, 247, 252, .5);
    --content-fill: rgba(243, 248, 251, .92);
    --sidebar-fill: rgba(230, 240, 247, .74);
    --popover-fill: rgba(243, 248, 252, .8);
    --surface: rgba(28, 56, 78, .055);
    --surface-hover: rgba(28, 56, 78, .09);
    --hairline: rgba(24, 54, 75, .13);
    --hairline-strong: rgba(18, 48, 70, .2);
    --hairline-dark: rgba(255,255,255,.35);
    --window-border: rgba(255,255,255,.66);
    --window-border-focus: rgba(255,255,255,.88);
    --shadow-window: 0 42px 100px rgba(9, 29, 49, .32), 0 12px 30px rgba(9, 29, 49, .2), inset 0 1px 0 rgba(255,255,255,.62);
    --shadow-panel: 0 24px 64px rgba(9, 29, 49, .26), 0 4px 14px rgba(9, 29, 49, .15), inset 0 1px 0 rgba(255,255,255,.7);
  }

  .desktop[data-accent="violet"] {
    --accent: #af94ff;
    --accent-rgb: 175, 148, 255;
    --accent-2: #70dfff;
  }

  .desktop[data-accent="mint"] {
    --accent: #78efc6;
    --accent-rgb: 120, 239, 198;
    --accent-2: #76ccff;
  }

  .desktop[data-accent="coral"] {
    --accent: #ff8fa5;
    --accent-rgb: 255, 143, 165;
    --accent-2: #ffc568;
  }

  .desktop[data-transparency="reduced"] {
    --glass-fill: rgba(10, 18, 31, .94);
    --glass-fill-strong: rgba(10, 17, 29, .98);
    --glass-fill-soft: rgba(15, 25, 40, .93);
    --content-fill: rgba(11, 20, 33, .98);
    --sidebar-fill: rgba(12, 21, 34, .97);
    --popover-fill: rgba(9, 16, 28, .98);
    --blur-window: 0px;
    --blur-panel: 0px;
    --blur-dock: 0px;
  }

  .desktop[data-contrast="high"] {
    --ink-2: rgba(255,255,255,.9);
    --ink-3: rgba(255,255,255,.72);
    --hairline: rgba(255,255,255,.28);
    --hairline-strong: rgba(255,255,255,.48);
    --window-border: rgba(255,255,255,.45);
  }

  body {
    background: #020812;
    color: var(--ink);
  }

  .glass {
    background: linear-gradient(145deg, rgba(255,255,255,.055), transparent 42%), var(--glass-fill);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-panel);
    -webkit-backdrop-filter: blur(var(--blur-panel)) saturate(135%);
    backdrop-filter: blur(var(--blur-panel)) saturate(135%);
  }

  .eyebrow {
    display: block;
    color: var(--ink-3);
    font-size: 9.5px;
    line-height: 1.2;
    font-weight: 750;
    letter-spacing: .12em;
  }

  .icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }

  kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 18px;
    padding: 0 5px;
    border-radius: 5px;
    border: 1px solid var(--hairline);
    background: rgba(255,255,255,.055);
    color: var(--ink-3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    font: 600 10px/1 "Segoe UI Variable Text", sans-serif;
  }

  :focus-visible {
    outline: 2px solid rgba(var(--accent-rgb), .94);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(4, 12, 22, .72), 0 0 0 6px rgba(var(--accent-rgb), .28) !important;
  }
}