/* short-link — Design System v1
 * 2026-05-18
 * Dark theme, B2B SaaS, без emoji в UI.
 * Используется всеми mockup-страницами.
 */

:root {
  /* ========== Colors ========== */
  --bg: #0a0d12;
  --bg-elev: #11161e;
  --bg-card: #161c26;
  --bg-hover: #1a212c;

  --border: #1f2733;
  --border-strong: #2a3441;

  --fg: #e8edf3;
  --fg-muted: #8b95a5;
  --fg-dim: #5a6577;

  --accent: #4f8cff;
  --accent-hi: #6ea1ff;
  --accent-soft: rgba(79, 140, 255, 0.12);

  --success: #3ecf8e;
  --success-soft: rgba(62, 207, 142, 0.12);

  --warning: #f5a524;
  --warning-soft: rgba(245, 165, 36, 0.12);

  --danger: #ff6b6b;
  --danger-soft: rgba(255, 107, 107, 0.12);

  --gradient: linear-gradient(135deg, #4f8cff 0%, #7c5cff 100%);

  /* ========== Spacing (4px base) ========== */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* ========== Radius ========== */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-full: 100px;

  /* ========== Typography ========== */
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
                  "PT Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "SF Mono", Menlo, Consolas, monospace;

  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 38px;
  --fs-hero: 56px;

  --lh-tight: 1.15;
  --lh-base: 1.55;

  /* ========== Shadow ========== */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);

  /* ========== Transitions ========== */
  --t-fast: 0.12s ease;
  --t-base: 0.2s ease;

  /* ========== Z-index ========== */
  --z-nav: 50;
  --z-modal: 1000;
  --z-toast: 2000;
}

/* ========== Reset / Base ========== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg);
  color: var(--fg);
  overflow-x: hidden;
}
body {
  font-family: var(--font-family);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }

/* ========== Headings — semantic + unified classes ==========
 * Используем h1/h2/h3 (а не div) везде, где есть смысловой заголовок.
 * Единая шкала — три класса. Размеры подобраны под cabinet/settings,
 * landing-страницы могут переопределять локально.
 *   .h-page   — h1, заголовок страницы (один на страницу)
 *   .h-section — h2, заголовок раздела/группы карточек
 *   .h-card   — h3, заголовок отдельной карточки/блока
 *
 * Базовое сбрасывание стилей h1-h6 — теги без класса будут наследовать
 * шрифт и вес родителя (чтобы legacy не ломалось).
 */
h1, h2, h3, h4, h5, h6 {
  font-weight: inherit; font-size: inherit; line-height: inherit;
  letter-spacing: inherit; color: inherit;
  margin: 0;
}
.h-page {
  font-size: var(--fs-2xl);  /* 28px */
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--fg);
}
.h-section {
  font-size: var(--fs-xl);   /* 22px (уменьшается в плотных контекстах через .h-section.compact) */
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--fg);
}
.h-section.compact { font-size: var(--fs-lg); }  /* 17px */
.h-card {
  font-size: var(--fs-md);   /* 15-16px */
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.35;
  color: var(--fg);
}

/* ========== Container ========== */
.container { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

/* ========== Utility ========== */
.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.fg-muted { color: var(--fg-muted); }
.fg-dim { color: var(--fg-dim); }
.mono { font-family: var(--font-mono); }