:root {
  /* Golden Gate palette — fog, bay, sunset steel */
  --gg-fog: #d8e2ec;
  --gg-bay: #1a3a52;
  --gg-bridge: #c45a2c;
  --gg-sunset: #e8894a;
  --gg-night: #0b1420;
  --gg-mist: #9bb4c8;
  --gg-steel: #8a9aab;

  --accent: #0a84ff;
  --accent-soft: rgba(10, 132, 255, 0.22);
  --danger: #ff453a;
  --success: #30d158;
  --warning: #ffd60a;

  --text: #f5f7fa;
  --text-dim: rgba(245, 247, 250, 0.72);
  --text-muted: rgba(245, 247, 250, 0.48);
  --text-inverse: #1c1c1e;

  /* Liquid Glass — intensity 0 (clear) → 1 (tinted) */
  --glass-intensity: 0.42;
  --glass-blur: calc(18px + (var(--glass-intensity) * 22px));
  --glass-sat: calc(140% + (var(--glass-intensity) * 40%));
  --glass-tint: rgba(28, 36, 48, calc(0.28 + var(--glass-intensity) * 0.52));
  --glass-fill: rgba(255, 255, 255, calc(0.12 - var(--glass-intensity) * 0.06));
  --glass-stroke: rgba(255, 255, 255, calc(0.42 - var(--glass-intensity) * 0.18));
  --glass-specular: rgba(255, 255, 255, calc(0.55 - var(--glass-intensity) * 0.2));
  --glass-edge: rgba(0, 0, 0, calc(0.18 + var(--glass-intensity) * 0.22));

  --window-radius: 16px;
  --window-inner-radius: calc(var(--window-radius) - 1px);
  --sidebar-width: 220px;
  --menubar-h: 25px;
  --dock-h: 70px;

  --shadow-window:
    0 0 0 0.5px var(--glass-edge),
    0 18px 50px rgba(0, 0, 0, 0.45),
    0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-active:
    0 0 0 0.5px rgba(0, 0, 0, 0.35),
    0 28px 70px rgba(0, 0, 0, 0.55),
    0 8px 20px rgba(0, 0, 0, 0.3);

  --font-ui: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-ui);
  background: var(--gg-night);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  cursor: default;
}

button, input {
  font-family: inherit;
}

button {
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
}

.hidden {
  display: none !important;
}

.invisible {
  opacity: 0;
  pointer-events: none;
}