/**
 * Design tokens — базовые переменные (бренд, отступы, фокус).
 * Подключается перед style.css. Страничные стили опираются на var(...).
 */
:root {
  /* Отступы */
  --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;

  /* Типографика */
  --font-sans: "Rubik", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;

  /* Радиусы и тени (согласованы с style.css) */
  --radius-token-sm: 6px;
  --radius-token-md: 10px;
  --radius-token-lg: 14px;
  --shadow-token-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-token-md: 0 4px 14px rgba(26, 47, 74, 0.1);

  /* Фокус: кольцо поверх существующих цветов */
  --focus-ring-color: rgba(42, 75, 124, 0.35);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* Skip link */
  --skip-link-bg: #ffffff;
  --skip-link-fg: #1a2f4a;
  --skip-link-border: #2a4b7c;
}

/* Доступность: видимый фокус клавиатуры */
:focus {
  outline: none;
}
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

a.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
a.skip-to-content:focus {
  position: fixed;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 100000;
  width: auto;
  height: auto;
  clip: auto;
  padding: var(--space-3) var(--space-4);
  margin: 0;
  overflow: visible;
  white-space: normal;
  font-weight: 600;
  font-size: var(--font-size-sm);
  font-family: var(--font-sans);
  color: var(--skip-link-fg);
  background: var(--skip-link-bg);
  border: 2px solid var(--skip-link-border);
  border-radius: var(--radius-token-sm);
  box-shadow: var(--shadow-token-md);
  text-decoration: none;
}