:root {
  --os-canvas: #06100f;
  --os-canvas-soft: #0a1715;
  --os-backdrop-scrim: rgb(4 7 10 / 34%);
  --os-workspace-scrim: rgb(2 7 8 / 56%);
  --os-wallpaper-filter: brightness(.74) saturate(.88) blur(5px);
  --os-glass: rgb(21 31 33 / 22%);
  --os-glass-strong: rgb(8 17 20 / 58%);
  --os-glass-opaque-fallback: rgb(8 17 20 / 97%);
  --os-glass-control: rgb(255 255 255 / 11%);
  --os-glass-control-hover: rgb(255 255 255 / 18%);
  --os-glass-border: rgb(255 255 255 / 25%);
  --os-glass-highlight: rgb(255 255 255 / 34%);
  --os-label-shadow: 0 2px 8px rgb(0 0 0 / 68%);
  --os-data-surface: rgb(8 13 15 / 86%);
  --os-data-surface-strong: rgb(10 15 17 / 94%);
  --os-analytical-surface: var(--os-data-surface-strong);
  --os-analytical-border: rgb(255 255 255 / 20%);
  --os-radius-analytical: 14px;
  --os-bar: rgb(8 15 18 / 48%);
  --os-glass-blur: 30px;
  --os-glass-saturation: 155%;
  --os-shadow: 0 28px 70px rgb(0 0 0 / 38%);
  --os-shadow-soft: 0 14px 36px rgb(0 0 0 / 22%);
  --os-gold: #d9bc71;
  --os-teal: #54dfb4;
  --os-red: #ff818d;
  --os-neutral: #a8b1b0;
  --os-radius-surface: 24px;
  --os-radius-control: 12px;
  --os-bar-height: 68px;
  --os-motion-instant: 0ms;
  --os-motion-press: 90ms;
  --os-motion-fast: 120ms;
  --os-motion-standard: 180ms;
  --os-motion-deliberate: 240ms;
  --os-motion-expressive: 240ms;
  --os-motion-spatial: 240ms;
  --os-motion-state: 180ms;
  --os-motion-route: 240ms;
  --os-ease: cubic-bezier(.2, .8, .2, 1);
  --os-ease-enter: cubic-bezier(.16, 1, .3, 1);
  --os-ease-exit: cubic-bezier(.4, 0, 1, 1);
  --os-ease-press: cubic-bezier(.2, .8, .2, 1);
  --os-motion-distance-micro: 2px;
  --os-motion-distance-small: 6px;
  --os-motion-distance-medium: 12px;
  --os-motion-press-scale: .985;
}

:root[data-theme='light'] {
  --os-canvas: #dfe7e3;
  --os-canvas-soft: #f4f6f2;
  --os-backdrop-scrim: rgb(244 238 228 / 25%);
  --os-workspace-scrim: rgb(232 236 232 / 42%);
  --os-wallpaper-filter: brightness(1.04) saturate(.72) blur(5px);
  --os-glass: rgb(255 255 255 / 24%);
  --os-glass-strong: rgb(250 252 249 / 62%);
  --os-glass-opaque-fallback: rgb(250 252 249 / 97%);
  --os-glass-control: rgb(255 255 255 / 34%);
  --os-glass-control-hover: rgb(255 255 255 / 50%);
  --os-glass-border: rgb(255 255 255 / 58%);
  --os-glass-highlight: rgb(255 255 255 / 78%);
  --os-label-shadow: 0 1px 7px rgb(255 255 255 / 82%);
  --os-data-surface: rgb(248 246 241 / 84%);
  --os-data-surface-strong: rgb(251 250 246 / 94%);
  --os-analytical-border: rgb(44 61 56 / 22%);
  --os-bar: rgb(250 252 249 / 48%);
  --os-shadow: 0 28px 70px rgb(42 64 57 / 17%);
  --os-shadow-soft: 0 14px 36px rgb(42 64 57 / 12%);
  --os-gold: #7e5b14;
  --os-teal: #087459;
  --os-red: #a73544;
  --os-neutral: #5e6764;
}