/**
 * Дизайн-система v2.0 — токены и утилиты (Genealogy_complex)
 * fileKey: Ye4Dkz8mwth9GvFudK5kMS
 *
 * Документация: DESIGN_SYSTEM.md в этой папке.
 * Сверьте числа с Figma Variables (Typography, Spacing, Corner, Shadows, Tooltip).
 */

/* Автономный режим: используем локально установленные шрифты без внешних CDN. */
@font-face {
  font-family: "Inter";
  src: local("Inter"), local("Inter Regular");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: local("Inter Italic"), local("Inter");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Onest";
  src:
    url("../Fonts/Onest-VariableFont_wght.ttf") format("truetype-variations"),
    url("../Fonts/Onest-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* --- Font families (Typography 538:1922) --- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* --- Typography scale --- */
  --text-display-xl-size: 4rem;
  --text-display-xl-line: 1.1;
  --text-display-xl-tracking: -0.02em;

  --text-display-lg-size: 3rem;
  --text-display-lg-line: 1.12;
  --text-display-lg-tracking: -0.02em;

  --text-h1-size: 2.5rem;
  --text-h1-line: 1.15;
  --text-h1-tracking: -0.02em;

  --text-h2-size: 2rem;
  --text-h2-line: 1.2;
  --text-h2-tracking: -0.015em;

  --text-h3-size: 1.5rem;
  --text-h3-line: 1.25;
  --text-h3-tracking: -0.01em;

  --text-h4-size: 1.25rem;
  --text-h4-line: 1.3;
  --text-h4-tracking: 0;

  --text-body-lg-size: 1.125rem;
  --text-body-lg-line: 1.5;

  --text-body-md-size: 1rem;
  --text-body-md-line: 1.5;

  --text-body-sm-size: 0.875rem;
  --text-body-sm-line: 1.45;

  --text-caption-size: 0.75rem;
  --text-caption-line: 1.35;

  --text-overline-size: 0.6875rem;
  --text-overline-line: 1.3;
  --text-overline-tracking: 0.08em;

  /* --- Spacing 4px grid (58:2323) --- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* --- Radius (537:1554) --- */
  --radius-none: 0;
  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 624.9375rem;

  /* --- Shadows (538:2977) --- */
  --shadow-color: 15 23 42;
  --shadow-xs: 0 1px 2px rgb(var(--shadow-color) / 0.06);
  --shadow-sm: 0 1px 3px rgb(var(--shadow-color) / 0.08), 0 1px 2px rgb(var(--shadow-color) / 0.06);
  --shadow-md: 0 4px 6px -1px rgb(var(--shadow-color) / 0.08), 0 2px 4px -2px rgb(var(--shadow-color) / 0.06);
  --shadow-lg: 0 10px 15px -3px rgb(var(--shadow-color) / 0.08), 0 4px 6px -4px rgb(var(--shadow-color) / 0.06);
  --shadow-xl: 0 20px 25px -5px rgb(var(--shadow-color) / 0.08), 0 8px 10px -6px rgb(var(--shadow-color) / 0.06);

  /* --- Tooltip (598:321) --- */
  --tooltip-bg: #1e293b;
  --tooltip-fg: #f8fafc;
  --tooltip-padding-x: var(--space-3);
  --tooltip-padding-y: var(--space-2);
  --tooltip-radius: var(--radius-md);
  --tooltip-font-size: var(--text-caption-size);
  --tooltip-font-weight: var(--font-weight-medium);
  --tooltip-line-height: var(--text-caption-line);
  --tooltip-max-width: 15rem;
  --tooltip-shadow: var(--shadow-md);
  --tooltip-z: 50;

  /* Базовые цвета текста/фона — расширьте из палитры DS в Figma */
  --color-text-primary: #0f172a;
  --color-text-muted: #64748b;
  --color-bg: #ffffff;
}

html {
  font-family: var(--font-sans);
  font-size: 100%;
  color: var(--color-text-primary);
  background-color: var(--color-bg);
}

/* --- Typography utilities --- */
.ds-display-xl {
  font-size: var(--text-display-xl-size);
  line-height: var(--text-display-xl-line);
  letter-spacing: var(--text-display-xl-tracking);
  font-weight: var(--font-weight-semibold);
}

.ds-display-lg {
  font-size: var(--text-display-lg-size);
  line-height: var(--text-display-lg-line);
  letter-spacing: var(--text-display-lg-tracking);
  font-weight: var(--font-weight-semibold);
}

.ds-h1 {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line);
  letter-spacing: var(--text-h1-tracking);
  font-weight: var(--font-weight-semibold);
}

.ds-h2 {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line);
  letter-spacing: var(--text-h2-tracking);
  font-weight: var(--font-weight-semibold);
}

.ds-h3 {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line);
  letter-spacing: var(--text-h3-tracking);
  font-weight: var(--font-weight-semibold);
}

.ds-h4 {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line);
  letter-spacing: var(--text-h4-tracking);
  font-weight: var(--font-weight-semibold);
}

.ds-body-lg {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  font-weight: var(--font-weight-regular);
}

.ds-body-md {
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-line);
  font-weight: var(--font-weight-regular);
}

.ds-body-sm {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  font-weight: var(--font-weight-regular);
}

.ds-caption {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  font-weight: var(--font-weight-medium);
}

.ds-overline {
  font-size: var(--text-overline-size);
  line-height: var(--text-overline-line);
  letter-spacing: var(--text-overline-tracking);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
}

/* --- Tooltip surface --- */
.ds-tooltip {
  box-sizing: border-box;
  max-width: var(--tooltip-max-width);
  padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
  border-radius: var(--tooltip-radius);
  background: var(--tooltip-bg);
  color: var(--tooltip-fg);
  font-size: var(--tooltip-font-size);
  font-weight: var(--tooltip-font-weight);
  line-height: var(--tooltip-line-height);
  box-shadow: var(--tooltip-shadow);
  z-index: var(--tooltip-z);
}