:root {
  color-scheme: light;
  --tg-safe-top: 0px;
  --tg-safe-bottom: 0px;
  --tg-safe-left: 0px;
  --tg-safe-right: 0px;
  --tg-viewport-height: 100vh;
  --tg-viewport-stable-height: 100vh;
  --tg-button-color: #5c8fff;
  --tg-link-color: #5c8fff;

  --bg-top: #fbf8f3;
  --bg-bottom: #ece8e2;
  --bg-elevated: rgba(255, 255, 255, 0.68);
  --surface: rgba(255, 255, 255, 0.74);
  --surface-strong: rgba(255, 255, 255, 0.9);
  --surface-soft: rgba(255, 250, 246, 0.72);
  --surface-admin: rgba(248, 247, 244, 0.94);

  --text: #10141c;
  --text-soft: #566175;
  --text-faint: #7f8898;

  --line: rgba(255, 255, 255, 0.88);
  --line-soft: rgba(16, 20, 28, 0.08);
  --line-strong: rgba(16, 20, 28, 0.14);

  --blue: #5c8fff;
  --cyan: #58cbff;
  --violet: #8875ff;
  --pink: #ff88bf;
  --gold: #f5c06a;
  --mint: #2ea56f;
  --amber: #bf8f32;
  --red: #c8626f;

  --radius-4xl: 38px;
  --radius-3xl: 32px;
  --radius-2xl: 28px;
  --radius-xl: 24px;
  --radius-lg: 20px;
  --radius-md: 16px;
  --radius-sm: 14px;

  --shadow-xs: 0 8px 18px rgba(26, 31, 42, 0.05);
  --shadow-sm: 0 16px 34px rgba(26, 31, 42, 0.08);
  --shadow-md: 0 24px 62px rgba(26, 31, 42, 0.11);
  --shadow-lg: 0 34px 98px rgba(26, 31, 42, 0.14);

  --accent-border: linear-gradient(
    135deg,
    rgba(88, 203, 255, 0.94),
    rgba(136, 117, 255, 0.84),
    rgba(255, 136, 191, 0.76),
    rgba(255, 255, 255, 0.72)
  );
  --hero-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.58)),
    radial-gradient(circle at 8% 10%, rgba(88, 203, 255, 0.24), transparent 26%),
    radial-gradient(circle at 92% 14%, rgba(136, 117, 255, 0.22), transparent 24%),
    radial-gradient(circle at 78% 88%, rgba(255, 136, 191, 0.18), transparent 28%),
    radial-gradient(circle at 22% 100%, rgba(245, 192, 106, 0.14), transparent 24%);

  --font-sans: Inter, -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --text-hero: clamp(28px, 5vw, 34px);
  --text-title: 22px;
  --text-section: 18px;
  --text-body: 14px;
  --text-caption: 12px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
}

:root[data-telegram-color-scheme='dark'] {
  color-scheme: light;
}