/* ══════════════════════════════════════════════════════════
   DESIGN SYSTEM — "Aether"
   Soul: Refined Minimalism — every element earns its place.
   Font: Inter — designed for screens.
   Palette: Ocean Blue + Slate + Sage + Amber.
   Principle: "Don't Make Me Think" + "Less is More"
   ══════════════════════════════════════════════════════════ */

/* ── Design Tokens ──────────────────────────────────────── */
:root {
  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 28px;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* Spacing (8px grid) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-full: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.1);

  /* Brand Colors (work on any theme) */
  --blue: #2563EB;
  --blue-hover: #1D4ED8;
  --blue-soft: #EFF6FF;
  --sage: #059669;
  --sage-soft: #ECFDF5;
  --amber: #D97706;
  --amber-soft: #FFFBEB;
  --red: #DC2626;
  --red-soft: #FEF2F2;

  /* Theme-aware tokens (Telegram CSS vars with fallbacks) */
  --bg: var(--tg-theme-bg-color, #FFFFFF);
  --bg2: var(--tg-theme-secondary-bg-color, #F0F2F5);
  --text: var(--tg-theme-text-color, #1F2937);
  --hint: var(--tg-theme-hint-color, #6B7280);
  --link: var(--tg-theme-link-color, #2563EB);
  --btn-bg: var(--tg-theme-button-color, #2563EB);
  --btn-text: var(--tg-theme-button-text-color, #FFFFFF);
  --border: var(--tg-theme-section-separator-color, #E5E7EB);
  --section-bg: var(--tg-theme-section-bg-color, #FFFFFF);
  --header-bg: var(--tg-theme-header-bg-color, #FFFFFF);
  --subtitle: var(--tg-theme-subtitle-text-color, #9CA3AF);
  --accent: var(--tg-theme-accent-text-color, #2563EB);
  --destructive: var(--tg-theme-destructive-text-color, #DC2626);

  /* Transition */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --duration: 280ms;
}

/* ── Reset & Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
}
a { color: var(--link); text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
button:disabled { cursor: default; }
input, textarea { font-family: inherit; font-size: inherit; }
::-webkit-scrollbar { width: 0; }

body.onboarding-active { overflow: hidden; }

.skip-link {
  position: fixed;
  left: var(--sp-3);
  top: var(--sp-3);
  z-index: 1000;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-text);
  transform: translateY(-140%);
  transition: transform .15s var(--ease);
}