:root {
  --tg-bg: #081636;
  --tg-text: #f8fafc;
  --tg-hint: #a9b9d6;
  --tg-link: #4acfff;
  --tg-button: #22c55e;
  --tg-button-text: #031f14;
  --tg-secondary-bg: #102a5d;
  --tg-header-bg: #07142f;
  --tg-viewport-height: 100vh;

  --brand-blue-950: #061128;
  --brand-blue-900: #081636;
  --brand-blue-800: #102a5d;
  --brand-blue-700: #184295;
  --brand-blue-500: #2e6bd6;
  --brand-cyan: #4acfff;
  --brand-green: #28c76f;
  --brand-pink: #ff4fe1;
  --brand-gold: #ffb400;
  --brand-red: #ef5b5b;

  --color-bg: var(--brand-blue-900);
  --color-bg-end: var(--brand-blue-700);
  --color-surface: rgb(11 30 68 / 88%);
  --color-surface-soft: rgb(255 255 255 / 7%);
  --color-surface-strong: #0b1835;
  --color-text: #f8fafc;
  --color-muted: #afbfda;
  --color-primary: #28c76f;
  --color-primary-text: #031f14;
  --color-border: rgb(255 255 255 / 13%);
  --color-border-strong: rgb(255 255 255 / 22%);
  --color-danger: #fb7185;
  --color-warning: #fbbf24;
  --color-success: #4ade80;
  --color-coin: #ffbd24;
  --color-xp-start: #7af6d8;
  --color-xp-end: #897aff;

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;
  --shadow-soft: 0 18px 46px rgb(0 0 0 / 28%);
  --shadow-card: 0 14px 30px rgb(0 0 0 / 18%);
  --shadow-nav: 0 -10px 30px rgb(0 0 0 / 40%);
  --content-width: 720px;
  --bottom-nav-height: 72px;
  --status-header-height: 94px;
  --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);
}