/**
 * AUTO-GENERATED BY tools/design-system/lint_design_system.py — DO NOT EDIT MANUALLY.
 * 3-Tier Design Tokens (primitive -> semantic -> component) & Tokenized Component Styles.
 */

:root {
  /* Tier 1: Primitive Tokens */
  --primitive-color-neutral-0: #FFFFFF;
  --primitive-color-neutral-50: #F8FAFC;
  --primitive-color-neutral-100: #F1F5F9;
  --primitive-color-neutral-200: #E2E8F0;
  --primitive-color-neutral-300: #CBD5E1;
  --primitive-color-neutral-400: #94A3B8;
  --primitive-color-neutral-500: #64748B;
  --primitive-color-neutral-600: #475569;
  --primitive-color-neutral-700: #334155;
  --primitive-color-neutral-800: #1E293B;
  --primitive-color-neutral-900: #141414;
  --primitive-color-neutral-950: #111111;
  --primitive-color-warm-50: #FAF9F6;
  --primitive-color-warm-100: #F4F3EF;
  --primitive-color-warm-200: #E5E0D8;
  --primitive-color-warm-300: #D8D2C7;
  --primitive-color-red-50: #FFF1F2;
  --primitive-color-red-100: #FFE4E6;
  --primitive-color-red-200: #FECDD3;
  --primitive-color-red-600: #E30016;
  --primitive-color-red-700: #C20013;
  --primitive-color-blue-50: #EFF6FF;
  --primitive-color-blue-100: #E0F2FE;
  --primitive-color-blue-200: #BAE6FD;
  --primitive-color-blue-600: #0B5CAB;
  --primitive-color-blue-700: #075985;
  --primitive-color-green-50: #F0FDF4;
  --primitive-color-green-100: #DCFCE7;
  --primitive-color-green-600: #15803D;
  --primitive-color-green-700: #166534;
  --primitive-color-amber-50: #FFFBEB;
  --primitive-color-amber-100: #FEF3C7;
  --primitive-color-amber-600: #D97706;
  --primitive-color-amber-700: #B45309;
  --primitive-color-violet-100: #EFE6FF;
  --primitive-color-violet-600: #6C3CE9;
  --primitive-color-social-max: #6C3CE9;
  --primitive-color-social-telegram: #2AABEE;
  --primitive-color-social-vk: #0077FF;
  --primitive-color-social-ok: #EE8208;
  --primitive-color-social-yandex: #FC3F1D;
  --primitive-font-family-sans: "MuseoSansCyrl", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --primitive-font-family-serif: Georgia, "PT Serif", "Times New Roman", serif;
  --primitive-font-size-2xs: 11px;
  --primitive-font-size-xs: 12px;
  --primitive-font-size-sm: 13.5px;
  --primitive-font-size-md: 15px;
  --primitive-font-size-lg: 17px;
  --primitive-font-size-xl: 20px;
  --primitive-font-size-2xl: 24px;
  --primitive-font-size-3xl: 32px;
  --primitive-font-weight-regular: 400;
  --primitive-font-weight-medium: 500;
  --primitive-font-weight-semibold: 600;
  --primitive-font-weight-bold: 700;
  --primitive-font-weight-extrabold: 800;
  --primitive-font-lineheight-tight: 1.25;
  --primitive-font-lineheight-snug: 1.38;
  --primitive-font-lineheight-normal: 1.5;
  --primitive-font-lineheight-relaxed: 1.65;
  --primitive-space-1: 4px;
  --primitive-space-2: 8px;
  --primitive-space-3: 12px;
  --primitive-space-4: 16px;
  --primitive-space-5: 20px;
  --primitive-space-6: 24px;
  --primitive-space-8: 32px;
  --primitive-space-10: 40px;
  --primitive-radius-none: 0px;
  --primitive-radius-xs: 6px;
  --primitive-radius-sm: 10px;
  --primitive-radius-md: 12px;
  --primitive-radius-lg: 16px;
  --primitive-radius-full: 999px;
  --primitive-shadow-xs: 0 1px 4px rgba(20, 20, 20, 0.04);
  --primitive-shadow-sm: 0 2px 10px rgba(20, 20, 20, 0.05);
  --primitive-shadow-md: 0 8px 24px rgba(20, 20, 20, 0.08);
  --primitive-layout-maxwidth: 1280px;
  --primitive-layout-outermaxwidth: 1320px;
  --primitive-layout-gutterdesktop: 20px;
  --primitive-layout-guttermobile: 12px;

  /* Tier 2: Semantic Tokens (reference primitive.*) */
  --semantic-color-surface-page: var(--primitive-color-warm-50);
  --semantic-color-surface-card: var(--primitive-color-neutral-0);
  --semantic-color-surface-muted: var(--primitive-color-warm-100);
  --semantic-color-surface-subtle: var(--primitive-color-neutral-50);
  --semantic-color-surface-inverse: var(--primitive-color-neutral-900);
  --semantic-color-surface-brand-tint: var(--primitive-color-red-50);
  --semantic-color-surface-info-tint: var(--primitive-color-blue-50);
  --semantic-color-text-primary: var(--primitive-color-neutral-900);
  --semantic-color-text-strong: var(--primitive-color-neutral-950);
  --semantic-color-text-secondary: var(--primitive-color-neutral-700);
  --semantic-color-text-muted: var(--primitive-color-neutral-500);
  --semantic-color-text-inverse: var(--primitive-color-neutral-0);
  --semantic-color-text-brand: var(--primitive-color-red-600);
  --semantic-color-text-info: var(--primitive-color-blue-600);
  --semantic-color-action-primary: var(--primitive-color-red-600);
  --semantic-color-action-primary-hover: var(--primitive-color-red-700);
  --semantic-color-action-secondary: var(--primitive-color-neutral-900);
  --semantic-color-action-secondary-hover: var(--primitive-color-neutral-800);
  --semantic-color-action-neutral: var(--primitive-color-warm-100);
  --semantic-color-action-neutral-hover: var(--primitive-color-warm-200);
  --semantic-color-link-default: var(--primitive-color-blue-600);
  --semantic-color-link-hover: var(--primitive-color-red-600);
  --semantic-color-border-subtle: var(--primitive-color-warm-200);
  --semantic-color-border-default: var(--primitive-color-neutral-200);
  --semantic-color-border-strong: var(--primitive-color-neutral-900);
  --semantic-color-border-brand: var(--primitive-color-red-200);
  --semantic-color-border-info: var(--primitive-color-blue-200);
  --semantic-color-border-focus: var(--primitive-color-blue-600);
  --semantic-color-status-success-bg: var(--primitive-color-green-50);
  --semantic-color-status-success-text: var(--primitive-color-green-700);
  --semantic-color-status-warn-bg: var(--primitive-color-amber-50);
  --semantic-color-status-warn-text: var(--primitive-color-amber-700);
  --semantic-color-status-danger-bg: var(--primitive-color-red-50);
  --semantic-color-status-danger-text: var(--primitive-color-red-700);
  --semantic-typography-font-ui: var(--primitive-font-family-sans);
  --semantic-typography-font-editorial: var(--primitive-font-family-serif);
  --semantic-typography-size-caption: var(--primitive-font-size-2xs);
  --semantic-typography-size-meta: var(--primitive-font-size-xs);
  --semantic-typography-size-body-sm: var(--primitive-font-size-sm);
  --semantic-typography-size-body: var(--primitive-font-size-md);
  --semantic-typography-size-title-sm: var(--primitive-font-size-lg);
  --semantic-typography-size-title-md: var(--primitive-font-size-xl);
  --semantic-typography-size-title-lg: var(--primitive-font-size-2xl);
  --semantic-typography-size-heading: var(--primitive-font-size-3xl);
  --semantic-layout-container-max: var(--primitive-layout-maxwidth);
  --semantic-layout-container-outer: var(--primitive-layout-outermaxwidth);
  --semantic-layout-gutter-desktop: var(--primitive-layout-gutterdesktop);
  --semantic-layout-gutter-mobile: var(--primitive-layout-guttermobile);
  --semantic-radius-control: var(--primitive-radius-sm);
  --semantic-radius-card: var(--primitive-radius-md);
  --semantic-radius-section: var(--primitive-radius-lg);
  --semantic-radius-pill: var(--primitive-radius-full);
  --semantic-elevation-card: var(--primitive-shadow-xs);
  --semantic-elevation-card-hover: var(--primitive-shadow-md);

  /* Tier 3: Component Tokens (reference semantic.*) */
  --component-button-primary-background-default: var(--semantic-color-action-primary);
  --component-button-primary-background-hover: var(--semantic-color-action-primary-hover);
  --component-button-primary-background-active: var(--semantic-color-action-secondary);
  --component-button-primary-background-focus: var(--semantic-color-action-primary-hover);
  --component-button-primary-background-disabled: var(--semantic-color-surface-muted);
  --component-button-primary-text-default: var(--semantic-color-text-inverse);
  --component-button-primary-text-hover: var(--semantic-color-text-inverse);
  --component-button-primary-text-active: var(--semantic-color-text-inverse);
  --component-button-primary-text-focus: var(--semantic-color-text-inverse);
  --component-button-primary-text-disabled: var(--semantic-color-text-muted);
  --component-button-primary-border-focus: var(--semantic-color-border-focus);
  --component-button-primary-radius-default: var(--semantic-radius-pill);
  --component-button-secondary-background-default: var(--semantic-color-surface-card);
  --component-button-secondary-background-hover: var(--semantic-color-surface-muted);
  --component-button-secondary-background-active: var(--semantic-color-action-secondary);
  --component-button-secondary-background-focus: var(--semantic-color-surface-muted);
  --component-button-secondary-background-disabled: var(--semantic-color-surface-subtle);
  --component-button-secondary-text-default: var(--semantic-color-text-primary);
  --component-button-secondary-text-hover: var(--semantic-color-text-strong);
  --component-button-secondary-text-active: var(--semantic-color-text-inverse);
  --component-button-secondary-text-focus: var(--semantic-color-text-strong);
  --component-button-secondary-text-disabled: var(--semantic-color-text-muted);
  --component-button-secondary-border-default: var(--semantic-color-border-default);
  --component-button-secondary-border-hover: var(--semantic-color-border-strong);
  --component-button-secondary-border-active: var(--semantic-color-border-strong);
  --component-button-secondary-border-focus: var(--semantic-color-border-focus);
  --component-pill-filter-background-default: var(--semantic-color-surface-muted);
  --component-pill-filter-background-hover: var(--semantic-color-action-neutral-hover);
  --component-pill-filter-background-active: var(--semantic-color-action-secondary);
  --component-pill-filter-background-focus: var(--semantic-color-action-neutral-hover);
  --component-pill-filter-background-disabled: var(--semantic-color-surface-subtle);
  --component-pill-filter-text-default: var(--semantic-color-text-primary);
  --component-pill-filter-text-hover: var(--semantic-color-text-strong);
  --component-pill-filter-text-active: var(--semantic-color-text-inverse);
  --component-pill-filter-text-focus: var(--semantic-color-text-strong);
  --component-pill-filter-text-disabled: var(--semantic-color-text-muted);
  --component-pill-filter-border-default: var(--semantic-color-border-subtle);
  --component-pill-filter-border-hover: var(--semantic-color-border-default);
  --component-pill-filter-border-active: var(--semantic-color-border-strong);
  --component-pill-filter-border-focus: var(--semantic-color-border-focus);
  --component-pill-filter-radius-default: var(--semantic-radius-pill);
  --component-card-surface-background-default: var(--semantic-color-surface-card);
  --component-card-surface-background-hover: var(--semantic-color-surface-card);
  --component-card-surface-background-muted: var(--semantic-color-surface-page);
  --component-card-surface-background-official: var(--semantic-color-surface-brand-tint);
  --component-card-surface-border-default: var(--semantic-color-border-subtle);
  --component-card-surface-border-hover: var(--semantic-color-border-strong);
  --component-card-surface-border-official: var(--semantic-color-border-brand);
  --component-card-surface-radius-default: var(--semantic-radius-card);
  --component-card-surface-radius-section: var(--semantic-radius-section);
  --component-card-surface-shadow-default: var(--semantic-elevation-card);
  --component-card-surface-shadow-hover: var(--semantic-elevation-card-hover);
  --component-badge-status-background-default: var(--semantic-color-surface-muted);
  --component-badge-status-background-brand: var(--semantic-color-action-primary);
  --component-badge-status-background-info: var(--semantic-color-surface-info-tint);
  --component-badge-status-background-warn: var(--semantic-color-status-warn-bg);
  --component-badge-status-background-success: var(--semantic-color-status-success-bg);
  --component-badge-status-text-default: var(--semantic-color-text-secondary);
  --component-badge-status-text-brand: var(--semantic-color-text-inverse);
  --component-badge-status-text-info: var(--semantic-color-text-info);
  --component-badge-status-text-warn: var(--semantic-color-status-warn-text);
  --component-badge-status-text-success: var(--semantic-color-status-success-text);
  --component-badge-status-radius-default: var(--semantic-radius-pill);
}

/* Layer 2: Tokenized Atomic Component Rules (.ds-btn, .ds-badge, .ds-card, .ds-section-header) */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--primitive-space-2);
  font-family: var(--semantic-typography-font-ui);
  font-weight: var(--primitive-font-weight-bold);
  border-radius: var(--component-button-primary-radius-default);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ds-btn--sm {
  padding: var(--primitive-space-1) var(--primitive-space-3);
  font-size: var(--semantic-typography-size-meta);
}

.ds-btn--md {
  padding: var(--primitive-space-2) var(--primitive-space-4);
  font-size: var(--semantic-typography-size-body-sm);
}

.ds-btn--primary {
  background: var(--component-button-primary-background-default);
  color: var(--component-button-primary-text-default);
  border: 1px solid transparent;
}

.ds-btn--primary:hover {
  background: var(--component-button-primary-background-hover);
  color: var(--component-button-primary-text-hover);
}

.ds-btn--primary.ds-state--active {
  background: var(--component-button-primary-background-active);
  color: var(--component-button-primary-text-active);
}

.ds-btn--primary.ds-state--disabled {
  background: var(--component-button-primary-background-disabled);
  color: var(--component-button-primary-text-disabled);
  cursor: not-allowed;
}

.ds-btn--secondary {
  background: var(--component-button-secondary-background-default);
  color: var(--component-button-secondary-text-default);
  border: 1px solid var(--component-button-secondary-border-default);
}

.ds-btn--secondary:hover {
  background: var(--component-button-secondary-background-hover);
  color: var(--component-button-secondary-text-hover);
  border-color: var(--component-button-secondary-border-hover);
}

.ds-btn--pill {
  background: var(--component-pill-filter-background-default);
  color: var(--component-pill-filter-text-default);
  border: 1px solid var(--component-pill-filter-border-default);
  border-radius: var(--component-pill-filter-radius-default);
}

.ds-btn--pill:hover {
  background: var(--component-pill-filter-background-hover);
  color: var(--component-pill-filter-text-hover);
  border-color: var(--component-pill-filter-border-hover);
}

.ds-btn--pill.ds-state--active {
  background: var(--component-pill-filter-background-active);
  color: var(--component-pill-filter-text-active);
  border-color: var(--component-pill-filter-border-active);
}

.ds-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--primitive-space-1) var(--primitive-space-2);
  border-radius: var(--component-badge-status-radius-default);
  font-family: var(--semantic-typography-font-ui);
  font-size: var(--semantic-typography-size-caption);
  font-weight: var(--primitive-font-weight-bold);
  background: var(--component-badge-status-background-default);
  color: var(--component-badge-status-text-default);
  white-space: nowrap;
}

.ds-badge--brand {
  background: var(--component-badge-status-background-brand);
  color: var(--component-badge-status-text-brand);
}

.ds-badge--info {
  background: var(--component-badge-status-background-info);
  color: var(--component-badge-status-text-info);
}

.ds-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--primitive-space-4) var(--primitive-space-5);
  background: var(--component-card-surface-background-default);
  border: 1px solid var(--component-card-surface-border-default);
  border-radius: var(--component-card-surface-radius-default);
  box-shadow: var(--component-card-surface-shadow-default);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ds-card--interactive:hover {
  border-color: var(--component-card-surface-border-hover);
  box-shadow: var(--component-card-surface-shadow-hover);
}

.ds-directory-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--primitive-space-2);
  margin-bottom: var(--primitive-space-2);
}

.ds-directory-card__title {
  font-family: var(--semantic-typography-font-ui);
  font-size: var(--semantic-typography-size-title-sm);
  font-weight: var(--primitive-font-weight-extrabold);
  color: var(--semantic-color-text-strong);
  text-decoration: none;
}

.ds-directory-card__list {
  list-style: none;
  margin: var(--primitive-space-1) 0 var(--primitive-space-3);
  padding: 0;
  font-size: var(--semantic-typography-size-body-sm);
  line-height: var(--primitive-font-lineheight-normal);
}

.ds-directory-card__item {
  margin-bottom: var(--primitive-space-1);
}

.ds-directory-card__sample-link {
  color: var(--semantic-color-text-secondary);
  text-decoration: none;
}

.ds-directory-card__sample-link:hover {
  color: var(--semantic-color-link-hover);
}

.ds-directory-card__more {
  font-size: var(--semantic-typography-size-meta);
  font-weight: var(--primitive-font-weight-bold);
  color: var(--semantic-color-link-default);
  text-decoration: none;
}

.ds-directory-card__more:hover {
  color: var(--semantic-color-link-hover);
}