:root {
  --bg-base: #050505;
  --bg-surface: #0d0d0d;
  --bg-elevated: #161616;
  --bg-overlay: #1f1f1f;

  --text-primary: #f2f2f2;
  --text-secondary: #a3a3a3;
  --text-muted: #6e6e6e;
  --text-on-color: var(--bg-base);

  --color-white: #ffffff;
  --color-green: #50c878;
  --color-green-light: #86e0a4;
  --color-green-dim: color-mix(in srgb, var(--color-green) 15%, transparent);
  --danger: #ed4245;

  --icon-duotone-opacity: 0.2;
  --hover-brightness: 1.15;

  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-3xl: 96px;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 3rem;
  --font-weight-semibold: 600;
  --line-height-tight: 1.3;
  --line-height-body: 1.6;
  --letter-spacing-tight: -0.02em;

  --control-height-lg: 40px;
  --control-height-xl: 48px;
  --icon-size-md: 16px;
  --icon-size-xl: 32px;
  --hero-icon-size: 96px;
  --border-width-control: 2px;
  --header-height: 64px;
  --page-width: 960px;
  --text-width: 680px;
  --button-min-width: 96px;

  --duration-fast: 150ms;
}