/*
 * Q2 Agency - дизайн-токены и общие состояния.
 * Подключается на всех страницах после fonts.css.
 * В шаблонах значения записаны прямо в style, переменные ниже - те же значения для переноса в продовый CSS.
 * Описание каждого токена: DESIGN-SYSTEM.md.
 */
:root {
  /* фон и поверхности */
  --color-bg: #07070a;
  --color-bg-elevated: #0c0b12;
  --color-bg-deep: #0b0b10;
  --color-panel: #14141c;
  --color-menu: rgba(14, 13, 20, 0.98);
  --color-fill-soft: rgba(255, 255, 255, 0.04);
  --color-fill: rgba(255, 255, 255, 0.05);
  --color-fill-chip: rgba(255, 255, 255, 0.06);
  --gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));

  /* границы */
  --color-border-soft: rgba(255, 255, 255, 0.06);
  --color-border: rgba(255, 255, 255, 0.09);
  --color-border-field: rgba(255, 255, 255, 0.12);
  --color-border-strong: rgba(255, 255, 255, 0.16);
  --color-border-hover: rgba(255, 255, 255, 0.3);

  /* текст */
  --color-text: #ffffff;
  --color-text-2: #c9c9d6;
  --color-text-3: #b9b9c6;
  --color-text-4: #9a9aab;
  --color-text-5: #8a8a9c;
  --color-text-6: #7d7d90;
  --color-placeholder: #77778a;

  /* бренд */
  --color-red: #ff2e4d;
  --color-magenta: #c0306f;
  --color-purple: #b44bff;
  --color-violet: #6a48ff;
  --color-indigo: #7b5cff;
  --color-blue: #4d6bff;
  --color-blue-soft: #b9c4ff;
  --color-telegram: #2aabee;
  --color-telegram-2: #2f8fff;
  --color-whatsapp: #25d366;

  /* статусы */
  --color-success: #3fd68a;
  --color-success-text: #7fe6b0;
  --color-warning-text: #ffc56b;
  --color-danger: #ff2e4d;
  --color-danger-text: #ff8a9c;

  /* градиенты */
  --gradient-brand: linear-gradient(100deg, #ff2e4d, #c0306f 45%, #6a48ff);
  --gradient-text: linear-gradient(90deg, #ff2e4d, #b44bff 50%, #4d6bff);
  --gradient-telegram: linear-gradient(100deg, #2aabee, #2f8fff);
  --gradient-ai-tile: linear-gradient(155deg, #ffffff, #f3f4f8 45%, #d9dde7);

  /* шрифты */
  --font-text: 'Onest', system-ui, sans-serif;
  --font-display: 'Unbounded', sans-serif;

  /* сетка */
  --container: 1280px;
  --gutter-desktop: 32px;
  --gutter-mobile: 16px;
  --header-h-desktop: 76px;
  --header-h-mobile: 64px;
  --control-h-desktop: 58px;
  --control-h-mobile: 54px;

  /* радиусы */
  --radius-xs: 7px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-card: 24px;
  --radius-pill: 999px;

  /* тени */
  --shadow-btn: 0 12px 36px rgba(255, 46, 77, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  --shadow-btn-hover: 0 18px 44px rgba(255, 46, 77, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  --shadow-card: 0 30px 70px rgba(0, 0, 0, 0.6);
  --shadow-float: 0 20px 50px rgba(0, 0, 0, 0.55);
  --shadow-menu: 0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-telegram: 0 10px 26px rgba(42, 171, 238, 0.3);
  --focus-ring: 0 0 0 4px rgba(255, 46, 77, 0.12);

  /* движение */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

html { -webkit-text-size-adjust: 100%; }
::selection { background: rgba(255, 46, 77, 0.35); color: #fff; }

/* Фокус с клавиатуры: видимая обводка у ссылок, кнопок и переключателей (у полей свой фокус: красная граница и кольцо) */
a:focus-visible, button:focus-visible, summary:focus-visible, [role="radio"]:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.field:focus-visible { outline: none; }

/* Нажатие и недоступность */
.btn:active, .ghost:active { transform: translateY(0) scale(0.99); }
button:disabled, .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; }