/* 
   * DESIGN SYSTEM VARIABLES 
   * Используйте эти переменные для единообразия во всем сайте
   */
  
  /* Цвета */
  :root {
    --ds-color-primary: #1a1a1a;      /* Основной цвет текста (заголовки) */
    --ds-color-secondary: #5a5a5a;    /* Вторичный цвет (текст, серые элементы) */
    --ds-color-accent: #0061cd;       /* Акцентный цвет (кавышки, ссылки, кнопки) */
    --ds-color-bg: #ffffff;           /* Фон */
  }

  /* Шрифты */
  :root {
    --ds-font-headline: var(--t-headline-font, Arial, sans-serif);
    --ds-font-body: var(--t-text-font, Arial, sans-serif);
    
    /* Сетка и отступы */
    --ds-gutter: 20px;
    --ds-section-padding: 80px;
  }
  
  /* Общие стили для удобства */
  .global-typo {
    font-family: var(--ds-font-body);
    color: var(--ds-color-primary);
    line-height: 1.6;
  }

  /* 
   * TYPOGRAPHY COMPONENTS 
   * Классы, которые можно применять к любому элементу
   * 
   * .t-uptitle — Эпиграф (как "О бизнес-центре")
   * .t-title — Заголовок H2 (как "Для бизнеса и жизни")
   * .t-descr — Подзаголовок или описание (абзац)
   */

  /* Эпиграф / Кепшот / Уптайл */
  .t-uptitle {
    font-family: var(--ds-font-headline);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ds-color-accent);
    margin: 0 0 12px;
    line-height: 1.6;
  }

  /* Основной заголовок (H2, H3) */
  .t-title {
    font-family: var(--ds-font-headline);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 20px;
    color: var(--ds-color-primary);
  }
  
  .t-title--sm { font-size: 28px; } /* Если нужен чуть меньше */
  .t-title--lg { font-size: 44px; } /* Если нужен больше */

  /* Описание / Подзаголовок (абзац) */
  .t-descr {
    font-family: var(--ds-font-body);
    font-size: 15px;
    line-height: 1.7;
    color: var(--ds-color-secondary);
    margin: 0 0 24px;
  }

  /* Стандартный текст (абзац основного текста) */
  .t-text {
    font-family: var(--ds-font-body);
    font-size: 15px; /* 15px для основного текста */
    line-height: 1.7; /* 1.7 для воздуха в тексте */
    color: var(--ds-color-primary);
    margin-bottom: 20px;
  }

  .t-text--small {
    font-size: 14px;
  }

  /* Ссылки в стиле системы */
  a {
    color: var(--ds-color-accent);
    text-decoration: none;
    transition: opacity 0.2s ease;
  }
  a:hover {
    opacity: 0.8;
    text-decoration: underline;
  }
  a[href^='tel'] {
    color: inherit; /* Телефонные номера не подкрасить */
  }

  /* Адаптивность для мобильных */
  @media (max-width: 480px) {
    .t-title { font-size: 26px; }
    .t-descr { font-size: 14px; }
    .t-text { font-size: 14px; }
  }