:root[data-theme] {
  --rit-bg: #0A0D0B;
  --rit-surface: #101411;
  --rit-section: #111612;
  --rit-text: #F2F5ED;
  --rit-muted: #B4BDB3;
  --rit-accent: #C9FF45;
  --rit-accent-text: #0A0D0B;
  --rit-link: #6DCAFF;
  --rit-outline: #343C35;
  --rit-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  --rit-content-safe-bottom: var(--tg-content-safe-area-inset-bottom, 0px);
  --rit-radius-sm: 12px;
  --rit-radius-md: 16px;
  --rit-radius-card: 23px;
  --rit-space-1: 8px;
  --rit-space-2: 12px;
  --rit-space-3: 16px;
  --rit-space-4: 24px;
}

:root[data-theme="light"] {
  --rit-bg: #F4EFE7;
  --rit-surface: #FFFAF3;
  --rit-section: #EFE5DA;
  --rit-text: #2B211D;
  --rit-muted: #66584F;
  --rit-accent: #D86A4E;
  --rit-action: #A33F28;
  --rit-accent-text: #FFFAF3;
  --rit-link: #426D8C;
  --rit-outline: #D8CBC0;
}

:root[data-theme="dark"] {
  --rit-action: #C9FF45;
}

html,
body {
  min-height: var(--rit-viewport-height, 100dvh);
  background-color: var(--rit-bg, var(--theme-bg));
  color: var(--rit-text, var(--theme-text));
}

.app {
  min-height: var(--rit-viewport-height, 100dvh);
  padding-bottom: calc(112px + var(--rit-safe-bottom, env(safe-area-inset-bottom, 0px)));
}

:root[data-theme] .nav.tab-bar {
  bottom: calc(8px + max(var(--rit-safe-bottom, env(safe-area-inset-bottom, 0px)), var(--rit-content-safe-bottom, 0px)));
  padding-bottom: 7px;
  background: color-mix(in srgb, var(--rit-surface) 88%, transparent);
  border-color: color-mix(in srgb, var(--rit-text) 18%, transparent);
}