/* ============================================================
   Den Froll AI — Колорная и типографическая система
   Брендбук v1.0 · 2026
   ============================================================ */

@import url('./fonts/fonts.css');

:root {
  /* ---------- ЦВЕТА · BRAND PALETTE ---------- */

  /* Поверхности (тёмная база) */
  --df-bg:           #0E0E0E;   /* Основной фон страницы — почти чёрный */
  --df-surface-1:    #1A1A1A;   /* Тёмный дым — карточки, вторичные поверхности */
  --df-surface-2:    #242424;   /* Поднятая поверхность — третий уровень иерархии */
  --df-border:       #2E2E2E;   /* Бордюр — разделители, обводки 1px */
  --df-border-soft:  #1E1E1E;   /* Тонкая обводка на тёмном фоне */

  /* Текст */
  --df-fg:           #F0F0F0;   /* Основной текст на тёмном фоне */
  --df-fg-strong:    #FFFFFF;   /* Заголовки и важные акценты */
  --df-fg-muted:     #BDBDBD;   /* Вторичный текст */
  --df-fg-faint:     #6E6E6E;   /* Лейблы, подписи, метки времени */

  /* Акцент */
  --df-orange:       #FF6B00;   /* Главный акцент — CTA, ссылки, иконки */
  --df-orange-hover: #FF8024;   /* Hover на оранжевом */
  --df-orange-press: #E85F00;   /* Press / active */
  --df-orange-soft:  #FF8C33;   /* Оранжевые лейблы и текст на тёмном (выше контраст) */
  --df-orange-tint:  rgba(255, 107, 0, 0.12); /* Фон для оранжевых пилюль/чипов */
  --df-orange-glow:  rgba(255, 107, 0, 0.35); /* Свечение для focus/glow */

  /* Семантические цвета (производные от палитры — мягкие, нейтральные) */
  --df-success:      #34D17A;
  --df-warning:      #FFB020;
  --df-danger:       #FF5252;
  --df-info:         #4DA3FF;

  /* На оранжевом фоне — только белый текст */
  --df-on-orange:    #FFFFFF;

  /* ---------- ТИПОГРАФИКА · TYPE STACKS ---------- */
  --df-font-display: 'Plus Jakarta Sans', 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --df-font-body:    'Inter', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --df-font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Размеры (брендбук) */
  --df-h1-size: 36px;  --df-h1-weight: 700;  --df-h1-lh: 1.15;  --df-h1-tracking: -0.02em;
  --df-h2-size: 24px;  --df-h2-weight: 700;  --df-h2-lh: 1.25;  --df-h2-tracking: -0.01em;
  --df-h3-size: 18px;  --df-h3-weight: 600;  --df-h3-lh: 1.35;  --df-h3-tracking: -0.005em;
  --df-body-size: 16px; --df-body-weight: 400; --df-body-lh: 1.5;
  --df-caption-size: 13px; --df-caption-weight: 400; --df-caption-lh: 1.45;
  --df-label-size: 12px; --df-label-weight: 600; --df-label-lh: 1.3; --df-label-tracking: 0.08em;

  /* ---------- РАДИУСЫ ---------- */
  --df-radius-xs: 4px;
  --df-radius-sm: 8px;
  --df-radius-md: 12px;
  --df-radius-lg: 16px;
  --df-radius-xl: 24px;
  --df-radius-pill: 999px;

  /* ---------- РАССТОЯНИЯ (4-pt grid) ---------- */
  --df-space-1:  4px;
  --df-space-2:  8px;
  --df-space-3:  12px;
  --df-space-4:  16px;
  --df-space-5:  20px;
  --df-space-6:  24px;
  --df-space-8:  32px;
  --df-space-10: 40px;
  --df-space-12: 48px;
  --df-space-16: 64px;
  --df-space-20: 80px;

  /* ---------- ТЕНИ ---------- */
  --df-shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --df-shadow-md: 0 4px 12px rgba(0,0,0,0.45);
  --df-shadow-lg: 0 16px 40px rgba(0,0,0,0.55);
  --df-shadow-orange: 0 8px 24px rgba(255, 107, 0, 0.28);

  /* ---------- ANIMATION ---------- */
  --df-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --df-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --df-dur-fast: 120ms;
  --df-dur-base: 200ms;
  --df-dur-slow: 320ms;
}

/* ============================================================
   СЕМАНТИЧЕСКИЕ ЭЛЕМЕНТЫ
   ============================================================ */

html, body {
  background: var(--df-bg);
  color: var(--df-fg);
  font-family: var(--df-font-body);
  font-size: var(--df-body-size);
  line-height: var(--df-body-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--df-font-display);
  color: var(--df-fg-strong);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--df-h1-size);
  font-weight: var(--df-h1-weight);
  line-height: var(--df-h1-lh);
  letter-spacing: var(--df-h1-tracking);
}
h2 {
  font-size: var(--df-h2-size);
  font-weight: var(--df-h2-weight);
  line-height: var(--df-h2-lh);
  letter-spacing: var(--df-h2-tracking);
}
h3 {
  font-size: var(--df-h3-size);
  font-weight: var(--df-h3-weight);
  line-height: var(--df-h3-lh);
  letter-spacing: var(--df-h3-tracking);
}

p { margin: 0; text-wrap: pretty; }

small, .df-caption {
  font-size: var(--df-caption-size);
  line-height: var(--df-caption-lh);
  color: var(--df-fg-muted);
}

.df-label, .df-eyebrow {
  font-family: var(--df-font-display);
  font-size: var(--df-label-size);
  font-weight: var(--df-label-weight);
  line-height: var(--df-label-lh);
  letter-spacing: var(--df-label-tracking);
  text-transform: uppercase;
  color: var(--df-fg-muted);
}

a {
  color: var(--df-orange-soft);
  text-decoration: none;
  transition: color var(--df-dur-fast) var(--df-ease);
}
a:hover { color: var(--df-orange); }

code, pre, .df-mono {
  font-family: var(--df-font-mono);
  font-size: 0.92em;
}

::selection { background: var(--df-orange); color: var(--df-on-orange); }