:root {
  color-scheme: dark;

  --color-canvas: #181a1d;
  --color-canvas-deep: #111316;
  --color-surface: #212429;
  --color-surface-raised: #2a2e34;
  --color-surface-hover: #30353c;
  --color-border: #3a4149;
  --color-border-strong: #59636e;
  --color-text: #f3f5f7;
  --color-text-secondary: #aeb6bf;
  --color-text-muted: #7f8994;
  --color-accent: #6487b9;
  --color-accent-hover: #7ea5d5;
  --color-accent-contrast: #08111f;
  --color-focus: #9bc7ff;
  --color-success: #68a778;
  --color-warning: #d1a257;
  --color-danger: #ca7070;
  --color-info: #78a9d7;
  --color-player: #000;
  --color-scrim: rgb(0 0 0 / 72%);
  --color-selection: rgb(100 135 185 / 24%);
  --color-selection-strong: #94b7e4;
  --color-side-menu-text: #292d32;
  --color-side-menu-divider: rgb(43 47 52 / 15%);

  --camera-a: #e5a55b;
  --camera-b: #76a9d3;
  --camera-c: #8fbe7f;
  --camera-drone: #b895d6;

  --font-ui: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font-copy: Inter, Aptos, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-timecode: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;

  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-md: 0.9375rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.35rem, 2vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 4vw, 2.75rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  --radius-control: 0.25rem;
  --radius-panel: 0.375rem;
  --border-thin: 1px;
  --border-strong: 2px;
  --focus-ring: 0 0 0 3px rgb(155 199 255 / 48%);

  --control-h: 2.75rem;
  --control-w-compact: 5.5rem;
  --control-w-date: 10.5rem;
  --touch-min: 2.75rem;
  --content-max: 100rem;
  --daily-min: 17.875rem;
  --sidebar-w: 19rem;
  --z-context-form: 12050;
  --z-card-progress: 5;

  --motion-fast: 140ms;
  --motion-ui: 180ms;
  --motion-layout: 250ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  --shadow-panel: 0 12px 40px rgb(0 0 0 / 32%);
  --shadow-player: 0 16px 64px rgb(0 0 0 / 56%);
}

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

html {
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-ui);
  line-height: 1.45;
  min-width: 20rem;
}

body {
  margin: 0;
  min-height: 100vh;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
input,
select,
textarea,
[tabindex]:not([tabindex="-1"]) {
  scroll-margin: 5rem;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

::selection {
  background: var(--color-accent);
  color: var(--color-text);
}

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