/* Заглушка стенда: только токены ui-kit (tokens.css кладёт скрипт деплоя из frontend/ui-kit/build). */
body {
  margin: 0;
  background: var(--ui-color-bg-canvas);
  color: var(--ui-color-text-default);
  font-family: var(--ui-font-family-sans);
  font-size: var(--ui-font-size-lg);
}

main {
  max-width: 48rem;
  margin: 0 auto;
  padding: 3rem 1rem;
}

h1 {
  margin: 0;
  color: var(--ui-color-accent-default);
  font-size: 2.5rem;
  font-weight: var(--ui-font-weight-semibold);
}

h2 {
  font-size: var(--ui-font-size-xl);
  font-weight: var(--ui-font-weight-medium);
}

span[lang] {
  display: block;
}

h2 span[lang],
li span[lang] {
  display: inline;
}

.lead {
  font-size: var(--ui-font-size-xl);
}

.note {
  padding: 0.75rem 1rem;
  border-radius: var(--ui-radius-md);
  background: var(--ui-color-status-info-bg);
  color: var(--ui-color-status-info-text);
}

section {
  margin-top: 2rem;
  padding: 1rem 1.5rem;
  border: 1px solid var(--ui-color-border-default);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-color-bg-surface);
}

.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 0.75rem;
  padding: 0;
  list-style: none;
}

.swatches li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sw {
  width: 2rem;
  height: 0.5rem;
  border-radius: var(--ui-radius-full);
}

.established { background: var(--ui-color-track-status-established); }
.not-established { background: var(--ui-color-track-status-not-established); }
.ownerless { background: var(--ui-color-track-status-ownerless); }
.disputed { background: var(--ui-color-track-status-disputed); }
.republic { background: var(--ui-color-track-owner-republic); }
.akimat { background: var(--ui-color-track-owner-akimat); }
.legal-entity { background: var(--ui-color-track-owner-legal-entity); }
.sole-proprietor { background: var(--ui-color-track-owner-sole-proprietor); }
.individual { background: var(--ui-color-track-owner-individual); }
.foreign { background: var(--ui-color-track-owner-foreign); }

footer {
  margin-top: 2rem;
  color: var(--ui-color-text-muted);
  font-size: var(--ui-font-size-md);
}