/* Дизайн-токены — единственный источник цветов, отступов, радиусов, шрифтов и длительностей.
   Имена theme-agnostic (значения — тёмной темы); все пары текст/фон проверены на WCAG AA. */
@layer tokens, base, layout, components, utilities;

@layer tokens {
:root {
  /* colors — поверхности и границы */
  --bg:            #0a0a0b;
  --surface-1:     #121214;
  --surface-2:     #19191c;
  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* colors — текст (контраст на --bg: 16.9 / 8.3 / 5.4) */
  --text-1: #ededf0;
  --text-2: #a7a7b1;
  --text-3: #85858f; /* только meta/подсказки */

  /* colors — акцент (один) и семантика */
  --accent:       #5b5dfa;
  --accent-hover: #6f71ff;
  --accent-soft:  rgba(91, 93, 250, 0.13);
  --on-accent:    #ffffff;
  --ok:   #3ecf7a;
  --err:  #f0545a;
  --warn: #e3a53c;

  /* spacing — шкала 4px */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* radii */
  --r-sm: 6px;  /* внутренние элементы полей, бейджи */
  --r-md: 10px; /* кнопки, поля */
  --r-lg: 14px; /* карточки, модалка */

  /* shadows — только модалка; поверхности = hairline-бордеры */
  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.5);
  --inset-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* motion */
  --t-fast: 140ms;
  --t-med:  220ms;
  --t-slow: 320ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* fonts */
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",
    sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* layout */
  --col: 640px; /* единственная колонка контента */
}
}