:root {
  color-scheme: dark;

  --color-background: #0a1220;
  --color-surface: #101c2d;
  --color-surface-hover: #152338;
  --color-surface-active: #192c44;
  --color-text-primary: #f2f5fb;
  --color-text-secondary: #bac6d8;
  --color-muted: #8393ac;
  --color-subtle: #64758f;
  --color-border: #233149;
  --color-border-soft: #1a2940;
  --color-accent: #7ab3ff;
  --color-accent-hover: #a7ceff;
  --color-accent-soft: #172d4a;
  --color-positive: #5dd3ad;
  --color-negative: #f18a9b;
  --color-trial: #e5c67c;
  --color-trial-background: #25251f;
  --color-trial-border: #514731;
  --color-focus: #a7ceff;
  --color-transparent: transparent;

  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-logo: 0.625rem;
  --font-size-caption: 0.6875rem;
  --font-size-small: 0.75rem;
  --font-size-detail: 0.8125rem;
  --font-size-body: 0.875rem;
  --font-size-control: 0.9375rem;
  --font-size-base: 1rem;
  --font-size-title: 1.1875rem;
  --font-size-page-title: 1.5rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.2;
  --line-height-compact: 1.4;
  --line-height-body: 1.6;
  --letter-spacing-title: -0.025em;
  --letter-spacing-value: -0.015em;

  --space-0: 0;
  --space-half: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --app-max-width: 640px;
  --page-gutter: var(--space-5);
  --page-top-space: var(--space-4);
  --page-bottom-space: var(--space-12);
  --section-gap: var(--space-10);
  --header-height: 120px;
  --brand-size: 96px;
  --brand-size-compact: 80px;
  --asset-logo-size: 40px;
  --asset-logo-size-compact: 32px;
  --asset-row-height: 88px;
  --asset-row-gap: var(--space-3);
  --asset-metrics-width: 114px;
  --asset-metrics-width-compact: 96px;
  --spark-width: 84px;
  --spark-width-compact: 56px;
  --spark-height: 40px;
  --icon-size: 20px;
  --icon-size-small: 16px;
  --icon-size-large: 28px;
  --indicator-size: 24px;
  --touch-target: 44px;
  --search-height: 48px;
  --state-min-height: 176px;
  --state-copy-width: 360px;
  --trial-max-width: 216px;
  --radius-small: 10px;
  --radius-medium: 14px;
  --radius-pill: 999px;
  --border-width: 1px;
  --focus-width: 2px;
  --focus-offset: 4px;
  --spinner-width: 2px;
  --motion-fast: 150ms;
  --motion-spin: 800ms;
  --motion-easing: ease;
  --opacity-added: 0.65;
  --sticky-layer: 2;

  --safe-top: calc(max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px));
  --safe-right: calc(max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px)) + var(--tg-content-safe-area-inset-right, 0px));
  --safe-bottom: calc(max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)) + var(--tg-content-safe-area-inset-bottom, 0px));
  --safe-left: calc(max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px)) + var(--tg-content-safe-area-inset-left, 0px));
}