:root {
  color-scheme: dark;

  /* Safe areas */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* Color system */
  --color-bg-welcome: #050505;
  --color-bg-main: #08080b;
  --color-bg-panel: rgba(15, 14, 22, .94);
  --color-text: #f5f6f8;
  --color-muted: #9ca0ad;
  --color-subtle: #777b88;
  --color-line: rgba(255, 255, 255, .12);
  --color-focus: #70e8ff;
  --color-accent-a: #9a82ff;
  --color-accent-b: #48ddff;
  --color-accent-c: #ff73bd;
  --color-positive: #63e99a;
  --color-warning: #ffca68;
  --color-danger: #ff819e;
  --color-external: #68c9ff;

  /* Space and shape */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --radius-sm: 14px;
  --radius-md: 24px;
  --radius-lg: 34px;
  --radius-pill: 999px;

  /* Interaction */
  --target-min: 24px;
  --target-comfortable: 44px;
  --motion-fast: 160ms;
  --motion-standard: 250ms;
  --motion-slow: 560ms;
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --shadow-elevated: 0 28px 90px rgba(0, 0, 0, .32);
  --shadow-dialog: 0 32px 120px rgba(0, 0, 0, .58);

  /* Layout */
  --content-width: 1160px;
  --navigation-width: 1080px;
  --fixed-nav-offset: 112px;

  /* Application layers */
  --z-background: 0;
  --z-content: 10;
  --z-floating: 200;
  --z-navigation: 1000;
  --z-progress: 1010;
  --z-dialog: 2000;
  --z-update: 2400;
  --z-toast: 3000;
  --z-transition: 4000;

  /* Compatibility aliases used by existing page CSS */
  --focus: var(--color-focus);
  --text: var(--color-text);
  --muted: var(--color-muted);
  --subtle: var(--color-subtle);
  --line: var(--color-line);
  --accent-a: var(--color-accent-a);
  --accent-b: var(--color-accent-b);
  --accent-c: var(--color-accent-c);
  --positive: var(--color-positive);
  --shadow: var(--shadow-elevated);
  --ease: var(--ease-standard);
}