:root {
  --color-fg: #2b2927;
  --color-bg: #c6c6f1;
  --color-ink-strong: #000;
  --color-domain-available: #0f0;
  --color-confirm-bg: #0a0;
  --color-token-erc: #7c8aff;
  --color-token-sati: #b98eff;
  --color-token-x402: #fbbf24;
  --color-trade-buy: #4ade80;
  --color-trade-sell: #f87171;
  --color-trade-transfer: #60a5fa;
  --font: 'IBM Plex Mono', monospace;
  --font-header: 'Stylish', system-ui, sans-serif;
  --font-normal: 400;
  --font-bold: 700;
  --radius: 4px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;
  --text-sm: clamp(14px, 0.15vw + 13.5px, 15px);
  --text-body: clamp(16px, 0.2vw + 15.5px, 18px);
  --text-header-md: clamp(22px, 0.8vw + 18px, 26px);
  --text-header-lg: clamp(30px, 1.2vw + 23px, 36px);
  --opacity-secondary: 0.5;
  --opacity-muted: 0.3;
  --border-subtle: 1px solid color-mix(in srgb, var(--color-fg) 10%, transparent);
  --border-soft: 1px solid color-mix(in srgb, var(--color-fg) 15%, transparent);
  --border-default: 1px solid color-mix(in srgb, var(--color-fg) 20%, transparent);
  --border-strong: 1px solid color-mix(in srgb, var(--color-fg) 30%, transparent);
  --surface-soft: color-mix(in srgb, var(--color-bg) 94%, transparent);
  --surface-overlay: color-mix(in srgb, var(--color-bg) 92%, transparent);
  --surface-press: color-mix(in srgb, var(--color-fg) 8%, transparent);
  --color-qr-bg: #fff;
  --focus-ring: 2px solid var(--color-fg);
  --focus-offset: 2px;
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-slow: 450ms;
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
}