/* U1HOST / дизайн-система на основе Lab UI v2.1 + фирменный стиль u1host.com.
   Имена совпадают с Figma: коллекции U1/Semantic и U1/Dimension, текстовые стили Title/…, Text/…, эффекты Shadow/…, Glow/Brand. */
:root {
  /* U1/Semantic: Backgrounds */
  --backgrounds-neutral-primary: #FFFFFF;
  --backgrounds-neutral-secondary: #F7F8FA;
  --backgrounds-neutral-inverted: #101012;
  --backgrounds-overlay-base: rgba(255, 255, 255, 0.48);
  /* Fills (нейтраль Lab UI #787880 и бренд u1host.com) */
  --fills-neutral-quaternary: rgba(120, 120, 128, 0.08);
  --fills-neutral-tertiary: rgba(120, 120, 128, 0.12);
  --fills-neutral-secondary: rgba(120, 120, 128, 0.16);
  --fills-brand-secondary: rgba(24, 119, 242, 0.08);
  --fills-brand-tertiary: rgba(24, 119, 242, 0.04);
  --fills-success-secondary: rgba(52, 199, 89, 0.08);
  --fills-warning-secondary: rgba(237, 110, 0, 0.08);
  --fills-danger-secondary: rgba(255, 59, 48, 0.08);
  /* Border */
  --border-neutral-soft: rgba(120, 120, 128, 0.08);
  --border-neutral-base: rgba(120, 120, 128, 0.16);
  --border-brand-strong: #1877F2;
  --border-danger-strong: #FF3B30;
  --border-warning-strong: #ED6E00;
  --border-success-strong: #34C759;
  /* Labels (статусы: значения Lab UI Light-mode/IC, читаются на белом) */
  --labels-neutral-primary: #101012;
  --labels-neutral-secondary: rgba(60, 60, 67, 0.72);
  --labels-neutral-tertiary: rgba(53, 53, 60, 0.72); /* Lab Light-mode/IC: в обычном режиме .52 не проходит AA */ /* Lab UI: .52, поднято до 4,7:1 ради WCAG AA */
  --labels-neutral-quaternary: rgba(60, 60, 67, 0.32);
  --labels-neutral-inverted-primary: #FFFFFF;
  --labels-neutral-inverted-tertiary: rgba(255, 255, 255, 0.52);
  --labels-static-light-primary: #FFFFFF;
  --labels-brand-primary: #0F63D4;
  --labels-success-primary: #1F7A35;
  --labels-warning-primary: #C93400;
  --labels-danger-primary: #C70013;
  --labels-danger-secondary: rgba(215, 0, 21, 0.8);
  /* Accent: синий u1host.com */
  --accent-brand: #0F63D4;
  --accent-brand-pressed: #0F63D4;
  --accent-brand-light: #3588FF;
  --accent-brand-active: #0A55BE;
  --fills-brand-primary: rgba(24, 119, 242, 0.12);
  --fills-danger-tertiary: rgba(255, 59, 48, 0.04);
  --fills-danger-primary: rgba(255, 59, 48, 0.12);
  --misc-control-control-bg: #FFFFFF;
  /* Из Lab UI (оттенок бренда u1host, прозрачности Lab) */
  --labels-warning-secondary: rgba(201, 52, 0, 0.8);
  --labels-success-secondary: rgba(36, 138, 61, 0.8);
  --labels-brand-secondary: rgba(24, 119, 242, 0.72);
  --labels-static-light-secondary: rgba(255, 255, 255, 0.72);
  --fills-neutral-primary: rgba(120, 120, 128, 0.2);
  --fills-brand-quaternary: rgba(24, 119, 242, 0.02);
  --fills-warning-primary: rgba(237, 110, 0, 0.12);
  --fills-success-primary: rgba(52, 199, 89, 0.12);
  --border-neutral-strong: #101012;
  --border-brand-base: rgba(24, 119, 242, 0.2);
  --border-brand-soft: rgba(24, 119, 242, 0.12);
  --border-danger-base: rgba(255, 59, 48, 0.2);
  --border-danger-soft: rgba(255, 59, 48, 0.12);
  --fx-focus-ring-brand: #1877F2;
  --fx-focus-ring-danger: #FF3B30;
  --fx-overlay-hover: rgba(255, 255, 255, 0.12);
  --fx-overlay-pressed: rgba(16, 16, 18, 0.12);
  --fx-glow-brand: rgba(24, 119, 242, 0.52);
  --accent-red: #D70015;

  /* U1/Dimension */
  /* Шкала отступов Lab UI: Spacing/Padding/* для внутренних отступов, Spacing/Margin/* для промежутков */
  --spacing-padding-none: 0px; --spacing-padding-xxs: 1px; --spacing-padding-xs: 2px; --spacing-padding-s: 4px; --spacing-padding-m: 8px; --spacing-padding-l: 12px; --spacing-padding-xl: 16px; --spacing-padding-2xl: 24px; --spacing-padding-3xl: 36px; --spacing-padding-4xl: 48px; --spacing-padding-5xl: 64px; --spacing-padding-6xl: 96px; --spacing-padding-7xl: 128px;
  --spacing-margin-none: 0px; --spacing-margin-xxs: 1px; --spacing-margin-xs: 2px; --spacing-margin-s: 4px; --spacing-margin-m: 8px; --spacing-margin-l: 12px; --spacing-margin-xl: 16px; --spacing-margin-2xl: 24px; --spacing-margin-3xl: 36px; --spacing-margin-4xl: 48px; --spacing-margin-5xl: 64px; --spacing-margin-6xl: 96px; --spacing-margin-7xl: 128px;
  /* Size/*: иконки и минимальные высоты */
  --size-xxs: 4px; --size-xs: 8px; --size-s: 12px; --size-m: 16px; --size-l: 20px; --size-xl: 24px; --size-2xl: 32px; --size-3xl: 48px; --size-4xl: 64px; --size-5xl: 80px; --size-6xl: 96px;
  --radius-none: 0; --radius-xxs: 2px; --radius-xs: 4px; --radius-s: 6px; --radius-m: 8px; --radius-l: 12px; --radius-xl: 16px; --radius-2xl: 20px;
  --radius-3xl: 24px; --radius-4xl: 28px; --radius-5xl: 32px; --radius-full: 9999px;

  /* Эффекты */
  --shadow-xs: 0 0 1px rgba(16,16,18,.12), 0 1px 1px rgba(16,16,18,.04), 0 2px 2px rgba(16,16,18,.02), 0 4px 2px rgba(16,16,18,.01);
  --shadow-s: 0 1px 2px rgba(16,16,18,.12), 0 2px 2px rgba(16,16,18,.04), 0 4px 4px rgba(16,16,18,.02), 0 12px 8px rgba(16,16,18,.01);
  --shadow-l: 0 1px 2px rgba(16,16,18,.12), 0 8px 16px rgba(16,16,18,.06), 0 24px 48px rgba(16,16,18,.08);
  --focus-ring: 0 0 0 2px var(--backgrounds-neutral-primary), 0 0 0 4px var(--accent-brand);
  --glow-brand: 0 20px 40px rgba(24,119,242,.24);
  --gradient-brand: linear-gradient(135deg, #3588FF 0%, #1877F2 100%);

  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* Текстовые стили: размер / межстрочный / вес / трекинг. Те, что есть в Lab UI, совпадают с ним (трекинг в Lab в процентах, здесь в em). */
.t-title-2xl { font: 500 32px/32px var(--font-sans); letter-spacing: -.01em; }
.t-title-xl { font: 500 24px/24px var(--font-sans); letter-spacing: -.005em; }
.t-headline-l { font: 600 20px/20px var(--font-sans); letter-spacing: -.0033em; }
.t-headline-m { font: 600 16px/22px var(--font-sans); letter-spacing: -.2px; }
.t-text-m { font: 400 16px/24px var(--font-sans); letter-spacing: -.0025em; }
.t-text-m-em { font: 500 16px/24px var(--font-sans); }
.t-label-m { font: 500 14px/20px var(--font-sans); }
.t-text-s { font: 400 14px/20px var(--font-sans); letter-spacing: -.1px; }
.t-text-s-em { font: 500 14px/20px var(--font-sans); }
.t-caption-xs { font: 500 12px/12px var(--font-sans); }
.t-caption-s { font: 500 14px/12px var(--font-sans); }
.t-title-number { font: 500 28px/32px var(--font-sans); letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.t-mono { font: 400 14px/20px var(--font-mono); }