@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Unbounded:wght@500;600;700;800&display=swap');

/*
  GoldenShuttle typography tokens.

  Этот файл не должен перетирать стили конкретных блоков.
  Он хранит только общие шрифты, шкалу размеров и базовые правила для html/body/нативных заголовков.
  Компоненты в шаблонах должны брать размеры через переменные --gs-fs-* и сами решать, какой уровень им нужен.
*/
:root {
  --gs-font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gs-font-heading: 'Unbounded', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Единая шкала размеров интерфейса. */
  --gs-fs-xs: 11px;
  --gs-fs-sm: 12px;
  --gs-fs-md: 14px;
  --gs-fs-lg: 18px;
  --gs-fs-xl: 24px;

  /* Семантические алиасы. */
  --gs-text-display: var(--gs-fs-xl);
  --gs-text-h1: var(--gs-fs-xl);
  --gs-text-h2: var(--gs-fs-lg);
  --gs-text-h3: var(--gs-fs-lg);
  --gs-text-body: var(--gs-fs-md);
  --gs-text-meta: var(--gs-fs-sm);

  --gs-line-tight: 1.12;
  --gs-line-title: 1.22;
  --gs-line-body: 1.6;
  --gs-letter-title: -0.035em;
  --gs-letter-meta: 0.06em;
}

html {
  font-size: var(--gs-text-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--gs-font-body);
  font-size: var(--gs-text-body);
  line-height: var(--gs-line-body);
}

button,
input,
select,
textarea {
  font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--gs-font-heading);
  font-weight: 700;
  line-height: var(--gs-line-title);
  letter-spacing: var(--gs-letter-title);
}

h1 { font-size: var(--gs-text-h1); }
h2 { font-size: var(--gs-text-h2); }
h3,
h4,
h5,
h6 { font-size: var(--gs-text-h3); }

/* Опциональные utility-классы. Они применяются только там, где их явно добавили в разметку. */
.gs-type-display,
.gs-type-h1,
.gs-type-h2,
.gs-type-h3,
.gs-heading {
  font-family: var(--gs-font-heading);
  font-weight: 700;
  line-height: var(--gs-line-title);
  letter-spacing: var(--gs-letter-title);
}

.gs-type-display { font-size: var(--gs-text-display); line-height: var(--gs-line-tight); }
.gs-type-h1 { font-size: var(--gs-text-h1); }
.gs-type-h2 { font-size: var(--gs-text-h2); }
.gs-type-h3 { font-size: var(--gs-text-h3); }
.gs-type-body { font-size: var(--gs-text-body); line-height: var(--gs-line-body); }
.gs-type-meta { font-size: var(--gs-text-meta); line-height: 1.45; }

@media (max-width: 640px) {
  :root {
    --gs-text-display: var(--gs-fs-xl);
    --gs-text-h1: var(--gs-fs-xl);
    --gs-text-h2: var(--gs-fs-lg);
    --gs-text-h3: var(--gs-fs-lg);
    --gs-text-body: var(--gs-fs-md);
    --gs-text-meta: var(--gs-fs-sm);
  }
}