/* BASE — CSS custom properties (design tokens) */

:root {
  /* Цвета фона */
  --bg-0: #0B0F1A;
  --bg-1: #131827;
  --bg-2: #1A2138;
  --bg-card: rgba(255, 255, 255, 0.04);
  --bg-card-hover: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.08);
  --border-bright: rgba(255, 255, 255, 0.15);

  /* Акценты */
  --accent-tg: #2EA6FF;
  --accent-tg-dim: #2EA6FF33;
  --accent-violet: #B24BF3;
  --accent-violet-dim: #B24BF333;
  --accent-mint: #22D3A0;
  --accent-mint-dim: #22D3A033;
  --accent-warn: #FFB020;
  --accent-warn-dim: #FFB02033;
  --accent-danger: #FF4D6D;
  --accent-danger-dim: #FF4D6D33;

  /* Текст */
  --text-0: #F5F7FB;
  --text-1: #C4CCDB;
  --text-2: #A7B0C2;
  --text-3: #7580A0;

  /* Градиенты */
  --grad-brand: linear-gradient(135deg, var(--accent-tg) 0%, var(--accent-violet) 100%);
  --grad-mint: linear-gradient(135deg, var(--accent-mint) 0%, var(--accent-tg) 100%);
  --grad-mesh: radial-gradient(circle at 20% 20%, #2EA6FF22 0%, transparent 50%),
               radial-gradient(circle at 80% 60%, #B24BF322 0%, transparent 50%),
               radial-gradient(circle at 50% 100%, #22D3A01A 0%, transparent 60%);

  /* Радиусы */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  /* Отступы (legacy — оставляем для обратной совместимости) */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 36px;
  --space-xl: 56px;
  --space-2xl: 80px;

  /* Fluid spacing — плавная шкала от мобилки до 4K */
  --sp-xs: clamp(4px, 0.5vw, 8px);
  --sp-sm: clamp(8px, 1vw, 16px);
  --sp-md: clamp(16px, 2vw, 32px);
  --sp-lg: clamp(24px, 3vw, 56px);
  --sp-xl: clamp(40px, 5vw, 96px);
  --sp-2xl: clamp(56px, 7vw, 140px);
  --sp-section: clamp(48px, 6vw, 120px);

  /* Fluid typography */
  --fs-h1: clamp(2rem, 1.4rem + 3vw, 4rem);
  --fs-h2: clamp(1.5rem, 1.1rem + 2vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  --fs-h4: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  --fs-body: clamp(0.95rem, 0.85rem + 0.4vw, 1.125rem);
  --fs-small: clamp(0.8rem, 0.75rem + 0.2vw, 0.95rem);
  --fs-tiny: clamp(0.7rem, 0.68rem + 0.15vw, 0.82rem);

  /* Канонические брейкпоинты (справочно, в media через значения) */
  --bp-sm: 600px;
  --bp-md: 900px;
  --bp-lg: 1200px;
  --bp-xl: 1600px;
  --bp-xxl: 1920px;

  /* Fluid container — scaling до 4K */
  --container: 1200px;
  --container-w: min(100% - 2 * var(--sp-md), 1200px);

  /* Тени */
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.45);
  --glow-tg: 0 0 40px var(--accent-tg-dim);
  --glow-violet: 0 0 40px var(--accent-violet-dim);

  /* Анимации */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;
}

/* Fluid container scaling на больших экранах */
@media (min-width: 1280px) {
  :root { --container-w: min(100% - 3rem, 1240px); }
}
@media (min-width: 1440px) {
  :root { --container-w: min(100% - 3rem, 1340px); }
}
@media (min-width: 1600px) {
  :root { --container-w: min(100% - 4rem, 1440px); }
}
@media (min-width: 1920px) {
  :root { --container-w: min(100% - 6rem, 1560px); }
}