/*
 * Design Tokens for Swiss-Tech "Grid Discipline" Design System
 * Все значения соответствуют спецификации из ui_kit.md и handoff_spec_static_seo.md
 */

:root {
  /* ===== ЦВЕТА ===== */
  /* Базовые цвета (монохром через opacity белого) */
  --bg-0: #000000;
  --bg-1: #0B0B0B;

  /* Текст с разной прозрачностью */
  --text-1: rgba(255, 255, 255, 0.92);    /* Основной текст */
  --text-2: rgba(255, 255, 255, 0.72);    /* Вторичный текст */
  --text-3: rgba(255, 255, 255, 0.52);    /* Подписи, лейблы */

  /* Границы и разделители */
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.18);

  /* Поверхности для карточек и панелей */
  --surface: rgba(255, 255, 255, 0.03);
  --surface-2: rgba(255, 255, 255, 0.04);  /* Для code panels */

  /* Акцентные цвета (строго по назначению) */
  --blue: #007aff;    /* ТОЛЬКО для интерактива: кнопки, ссылки, активные состояния */
  --red: #ff3b30;     /* ТОЛЬКО для ошибок и критических действий */

  /* ===== ТИПОГРАФИКА ===== */
  /* Размеры шрифтов (Desktop) */
  --font-size-h1: clamp(2.125rem, 4vw, 4rem);      /* 34-64px */
  --font-size-h2: clamp(1.75rem, 3vw, 2.5rem);     /* 28-40px */
  --font-size-h3: clamp(1.25rem, 2vw, 1.75rem);    /* 20-28px */
  --font-size-body: clamp(1rem, 1.5vw, 1.125rem);  /* 16-18px */
  --font-size-micro: 0.8125rem;                    /* 13px */

  /* Насыщенность (font-weight) */
  --font-weight-light: 400;
  --font-weight-regular: 500;
  --font-weight-medium: 550;
  --font-weight-semibold: 600;
  --font-weight-bold: 650;
  --font-weight-extrabold: 700;

  /* Межстрочный интервал (line-height) */
  --line-height-tight: 1.05;
  --line-height-heading: 1.15;
  --line-height-body: 1.45;
  --line-height-micro: 1.3;

  /* Межбуквенный интервал (letter-spacing) */
  --letter-spacing-micro: 0.08em;
  --letter-spacing-normal: normal;

  /* Шрифтовая семья */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
                 Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;

  /* ===== ОТСТУПЫ И РАЗМЕРЫ ===== */
  /* Базовая единица: 8px */
  --space-unit: 8px;

  /* Шкала отступов (строго кратно 8) */
  --space-4: 4px;   /* 4px для очень мелких отступов */
  --space-8: calc(var(--space-unit) * 1);   /* 8px */
  --space-12: 12px; /* 12px для элементов списков и мелких gap */
  --space-16: calc(var(--space-unit) * 2);  /* 16px */
  --space-20: 20px; /* 20px для карточек (20-32 по ТЗ) */
  --space-24: calc(var(--space-unit) * 3);  /* 24px */
  --space-32: calc(var(--space-unit) * 4);  /* 32px */
  --space-48: calc(var(--space-unit) * 6);  /* 48px */
  --space-64: calc(var(--space-unit) * 8);  /* 64px */
  --space-96: calc(var(--space-unit) * 12); /* 96px */

  /* ===== РАДИУСЫ СКРУГЛЕНИЯ ===== */
  --radius-sm: 12px;    /* Карточки, кнопки, поля ввода */
  --radius-md: 16px;    /* Крупные панели, модальные окна */
  --radius-pill: 999px; /* Чипы, бейджи */

  /* ===== АНИМАЦИИ И ПЕРЕХОДЫ ===== */
  /* Длительности */
  --duration-fast: 160ms;
  --duration-medium: 220ms;
  --duration-slow: 420ms;

  /* Функции плавности (easing) */
  --ease-in-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* Задержки для stagger анимаций */
  --stagger-step: 40ms;

  /* ===== ТЕНИ И ЭФФЕКТЫ ===== */
  /* Тени не используются, вместо них - границы и трансформации */
  --shadow-blue-glow: 0 0 0 1px rgba(0, 122, 255, 0.35);

  /* ===== BREAKPOINTS ===== */
  /* Используются в медиа-запросах */
  --breakpoint-mobile-s: 480px;
  --breakpoint-mobile: 768px;
  --breakpoint-tablet: 1024px;
  --breakpoint-desktop: 1280px;

  /* ===== Z-INDEX СЛОИ ===== */
  --z-index-base: 1;
  --z-index-dropdown: 10;
  --z-index-sticky: 100;
  --z-index-fixed: 1000;
  --z-index-modal: 10000;
  --z-index-toast: 100000;

  /* ===== GRID OVERLAY ===== */
  /* Настройки для фоновой сетки */
  --grid-overlay-opacity-hero: 0.06;     /* 6% для hero секций */
  --grid-overlay-opacity-content: 0.03;  /* 3% для текстовых блоков */
  --grid-cell-size: 32px;                /* Размер ячейки сетки */
}

/* Утилитарные классы для быстрого доступа к токенам */
.color-blue { color: var(--blue); }
.color-red { color: var(--red); }
.color-text-1 { color: var(--text-1); }
.color-text-2 { color: var(--text-2); }
.color-text-3 { color: var(--text-3); }

.bg-surface { background-color: var(--surface); }
.bg-surface-2 { background-color: var(--surface-2); }

.border-default { border-color: var(--border); }
.border-strong { border-color: var(--border-strong); }

.radius-sm { border-radius: var(--radius-sm); }
.radius-md { border-radius: var(--radius-md); }
.radius-pill { border-radius: var(--radius-pill); }

/* Адаптивные медиа-запросы как CSS переменные для использования в JS */
@media (max-width: 479px) {
  :root { --viewport: 'mobile-s'; }
}

@media (min-width: 480px) and (max-width: 767px) {
  :root { --viewport: 'mobile'; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root { --viewport: 'tablet'; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  :root { --viewport: 'desktop'; }
}

@media (min-width: 1280px) {
  :root { --viewport: 'desktop-l'; }
}