/*
 * Эксперт Новострой — Design Tokens
 * Источник: expert-novostroy.ru/contacts (скрийншот + CSS :root сайта)
 * Подключать первым; quiz.css и будущие стили опираются на эти переменные.
 */

:root {
  /* ——— Color: surfaces ——— */
  --ds-bg-page: #f4f4f4;
  --ds-bg-brand: #f4f8fb;
  --ds-bg-card: #ffffff;
  --ds-bg-hero: linear-gradient(180deg, #e8f3f9 0%, #f4f8fb 45%, #ffffff 100%);
  --ds-bg-icon: #edf7fb;

  /* ——— Color: text ——— */
  --ds-text-h1: #2f3947;
  --ds-text-heading: #303b49;
  --ds-text-body: #5d6c7c;
  --ds-text-lead: #536372;
  --ds-text-muted: #697786;
  --ds-text-on-dark: #ffffff;
  --ds-text-on-cta: #ffffff;

  /* ——— Color: brand ——— */
  --ds-dark: #202d3b;
  --ds-graphite: #424c5c;
  --ds-steel: #5d8aa3;
  --ds-blue: #7aafca;
  --ds-line: #dce8f0;
  --ds-orange: #ffa828;
  --ds-orange-hot: #ffb340;
  --ds-orange-grad: linear-gradient(180deg, #ffb84a 0%, #ffa828 55%, #f59a16 100%);
  --ds-steel-grad: linear-gradient(135deg, #7aafca 0%, #5d8aa3 100%);

  /* ——— Color: status (quiz / forms) ——— */
  --ds-danger: #c0392b;
  --ds-focus-ring: rgba(93, 138, 163, 0.35);

  /* ——— Typography ——— */
  --ds-font: "Montserrat", "Segoe UI", Arial, sans-serif;
  --ds-fw-regular: 400;
  --ds-fw-medium: 500;
  --ds-fw-semibold: 600;
  --ds-fw-bold: 700;
  --ds-fw-extrabold: 800;

  --ds-fs-xs: 12px;
  --ds-fs-sm: 14px;
  --ds-fs-md: 16px;
  --ds-fs-lg: 18px;
  --ds-fs-xl: 22px;
  --ds-fs-h1: clamp(28px, 3.2vw, 42px);
  --ds-fs-h2: clamp(22px, 2.4vw, 32px);
  --ds-fs-lead: clamp(15px, 1.5vw, 17px);

  --ds-lh-tight: 1.25;
  --ds-lh-snug: 1.35;
  --ds-lh-body: 1.55;

  /* ——— Radii (с контактов) ——— */
  --ds-r-input: 14px;
  --ds-r-btn: 15px;
  --ds-r-icon: 17px;
  --ds-r-small: 20px;
  --ds-r-card: 24px;
  --ds-r-media: 30px;
  --ds-r-cta: 34px;
  --ds-r-hero: 36px;
  --ds-r-pill: 999px;

  /* ——— Shadows ——— */
  --ds-shadow-sm: 0 12px 30px rgba(66, 76, 92, 0.08);
  --ds-shadow-lg: 0 22px 55px rgba(66, 76, 92, 0.13);
  --ds-shadow-panel: 0 18px 48px rgba(32, 45, 59, 0.18);

  /* ——— Space ——— */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 24px;
  --ds-space-6: 32px;
  --ds-space-7: 48px;
  --ds-space-8: 64px;
  --ds-gutter: 32px;

  /* ——— Layout ——— */
  --ds-wide: 1764px;
  --ds-content: 1120px;
  --ds-quiz-panel: 880px;
  --ds-topbar-h: 56px;

  /* ——— Motion ——— */
  --ds-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ds-dur-fast: 0.15s;
  --ds-dur: 0.35s;
  --ds-dur-slow: 0.5s;

  /* ——— Aliases for existing quiz.css (--en-*) ——— */
  --en-dark: var(--ds-dark);
  --en-deep: var(--ds-steel);
  --en-blue: var(--ds-steel);
  --en-blue-bright: var(--ds-blue);
  --en-blue-light: var(--ds-blue);
  --en-blue-pale: var(--ds-bg-icon);
  --en-bg: var(--ds-bg-page);
  --en-bg-brand: var(--ds-bg-brand);
  --en-h1: var(--ds-text-h1);
  --en-heading: var(--ds-text-heading);
  --en-graphite: var(--ds-graphite);
  --en-lead: var(--ds-text-lead);
  --en-body: var(--ds-text-body);
  --en-muted: var(--ds-text-muted);
  --en-line: var(--ds-line);
  --en-orange: var(--ds-orange);
  --en-orange-hot: var(--ds-orange-hot);
  --en-icon-bg: var(--ds-bg-icon);
  --en-grad: var(--ds-steel-grad);
  --en-shadow: var(--ds-shadow-lg);
  --en-shadow-sm: var(--ds-shadow-sm);
  --en-navy: var(--ds-dark);
  --en-navy-deep: #162029;
  --en-ink: var(--ds-text-h1);
  --en-white: #fff;
  --en-border: var(--ds-line);
  --en-font: var(--ds-font);
  --en-radius: var(--ds-r-card);
  --en-panel-w: var(--ds-quiz-panel);
  --en-bar: #2a3a4c;
  --en-text: var(--ds-fs-md);
  --en-text-sm: var(--ds-fs-sm);
  --en-topbar-h: var(--ds-topbar-h);
}