@layer crackmac.tokens {
  :root {
    color-scheme: dark;

    /* Core light and status */
    --cm-cyan-100: #d8ffff;
    --cm-cyan-200: #9bffff;
    --cm-cyan-300: #65fbff;
    --cm-cyan-400: #35f5ff;
    --cm-cyan-500: #12dce9;
    --cm-cyan-600: #0797b4;
    --cm-orange-300: #ffc35c;
    --cm-orange-400: #ffb11f;
    --cm-orange-500: #ff8a00;
    --cm-green-400: #4dff9a;
    --cm-violet-400: #bf78ff;
    --cm-red-400: #ff6761;
    --cm-yellow-400: #ffe45d;

    /* Environment and material */
    --cm-void: #010508;
    --cm-void-blue: #020a10;
    --cm-panel: rgb(4 52 63 / 70%);
    --cm-panel-deep: rgb(2 29 38 / 87%);
    --cm-panel-soft: rgb(6 73 84 / 55%);
    --cm-panel-inset: rgb(0 19 27 / 68%);
    --cm-line: rgb(76 240 249 / 65%);
    --cm-line-soft: rgb(116 248 255 / 23%);
    --cm-line-faint: rgb(116 248 255 / 11%);
    --cm-reflection: rgb(180 255 255 / 12%);
    --cm-shadow: rgb(0 0 0 / 42%);

    /* Text */
    --cm-text: #e9feff;
    --cm-text-strong: #f7ffff;
    --cm-text-muted: #8fc3c9;
    --cm-text-faint: #527f87;

    /* State semantics */
    --cm-state-available: var(--cm-green-400);
    --cm-state-preview: var(--cm-orange-400);
    --cm-state-development: var(--cm-violet-400);
    --cm-state-danger: var(--cm-red-400);
    --cm-state-info: var(--cm-cyan-400);

    /* Typography */
    --cm-font-interface: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
    --cm-font-data: "Cascadia Mono", Consolas, monospace;
    --cm-weight-regular: 430;
    --cm-weight-medium: 580;
    --cm-weight-bold: 720;
    --cm-tracking-label: .1em;

    /* Geometry */
    --cm-radius-bay: 22px;
    --cm-radius-panel: 16px;
    --cm-radius-control: 10px;
    --cm-radius-small: 7px;
    --cm-space-1: 4px;
    --cm-space-2: 8px;
    --cm-space-3: 12px;
    --cm-space-4: 16px;
    --cm-space-5: 20px;
    --cm-space-6: 24px;
    --cm-space-8: 32px;

    /* Motion */
    --cm-duration-fast: 140ms;
    --cm-duration-control: 190ms;
    --cm-duration-panel: 320ms;
    --cm-ease-standard: cubic-bezier(.2, .72, .2, 1);
    --cm-ease-enter: cubic-bezier(.12, .8, .18, 1);

    /* Effects */
    --cm-blur-panel: 16px;
    --cm-glow-cyan: 0 0 20px rgb(0 223 242 / 16%);
    --cm-glow-cyan-active: 0 0 18px rgb(53 245 255 / 30%);
    --cm-glow-orange: 0 0 11px rgb(255 138 0 / 55%);
    --cm-focus-ring: 0 0 0 2px var(--cm-void), 0 0 0 4px var(--cm-cyan-200), 0 0 16px rgb(53 245 255 / 42%);

    /* Route-level variables. Theme manifests/CSS set these. */
    --cm-theme-primary: var(--cm-cyan-400);
    --cm-theme-secondary: var(--cm-orange-500);
    --cm-theme-tertiary: var(--cm-green-400);
    --cm-theme-world-a: #022b37;
    --cm-theme-world-b: #001016;
  }

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

  :where(html) { color-scheme: dark; }

  :where(body) {
    margin: 0;
    color: var(--cm-text);
    background: var(--cm-void);
    font-family: var(--cm-font-interface);
    font-weight: var(--cm-weight-regular);
  }

  :where(button, input, select, textarea) { font: inherit; }

  :where(a) { color: inherit; }

  :where(:focus-visible) { outline: none; box-shadow: var(--cm-focus-ring); }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --cm-duration-fast: 1ms;
    --cm-duration-control: 1ms;
    --cm-duration-panel: 1ms;
  }
}