/* Design tokens. Everything visual is tuned here first. */
:root {
  /* macOS system palette — keeps the chrome reading as native */
  --accent: #0A84FF;
  --accent-deep: #0060DF;
  --green: #32D74B;
  --teal: #5AC8C8;
  --red: #FF453A;
  --orange: #FF9F0A;

  /* traffic lights */
  --tl-red: #FF5F57;
  --tl-yellow: #FEBC2E;
  --tl-green: #28C840;

  /* type */
  --text: rgba(255, 255, 255, 0.96);
  --muted: rgba(235, 235, 245, 0.62);
  --muted-2: rgba(235, 235, 245, 0.40);
  --muted-3: rgba(235, 235, 245, 0.26);

  /* surfaces */
  --chrome: rgba(38, 40, 48, 0.72);
  --chrome-2: rgba(34, 36, 44, 0.74);
  --sidebar: rgba(66, 69, 82, 0.46);
  --sheet: rgba(24, 26, 31, 0.92);
  --hair: rgba(255, 255, 255, 0.10);
  --hair-strong: rgba(255, 255, 255, 0.16);
  --fill: rgba(255, 255, 255, 0.06);
  --fill-2: rgba(255, 255, 255, 0.09);

  /* depth */
  --shadow-win: 0 34px 86px rgba(0, 0, 0, 0.55), 0 10px 24px rgba(0, 0, 0, 0.38);
  --shadow-dock: 0 22px 54px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --shadow-pop: 0 18px 44px rgba(0, 0, 0, 0.5);
  --blur-chrome: blur(34px) saturate(180%);

  /* geometry */
  --radius-win: 12px;
  --radius-pop: 12px;
  --menubar-h: 36px;
  --dock-icon: 52px;

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-snap: cubic-bezier(0.32, 0.9, 0.3, 1);
  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-win: 360ms;

  /* text scale */
  --text-xs: 11px;
  --text-sm: 12.5px;
  --text-base: 13.5px;
  --text-lg: 17px;
  --text-title: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);

  font-synthesis: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }

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

body {
  background: #05070B;
  color: var(--text);
  font-family: -apple-system, "SF Pro Text", "SF Pro Display", system-ui,
    "Helvetica Neue", Inter, sans-serif;
  font-size: var(--text-base);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

button { font: inherit; color: inherit; }

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

::selection { background: rgba(10, 132, 255, 0.35); }

/* thin translucent scrollbars, like the real thing */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 9px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}