/* STARTAPIX — дизайн-токены. Единственная тема — тёмная.
   Все значения точные, взяты из макета. Хардкод цветов и размеров в разметке запрещён. */

:root {
  /* ---------- Цвет: поверхности ---------- */
  --color-bg:            #0A0B0A; /* фон страницы */
  --color-surface:       #141614; /* карточка, панель, поле ввода на карточке */
  --color-surface-sunken:#0F110F; /* поле ввода, вложенный блок, сайдбар */
  --color-surface-raised:#181B18; /* выбранная строка таблицы, ховер строки */
  --color-chip:          #1B1F1B; /* фон ярлыка категории */

  /* ---------- Цвет: границы ---------- */
  --color-border:        #232723; /* основная граница и разделитель */
  --color-border-strong: #2E3A32; /* граница вторичной кнопки, dropzone */
  --color-border-hair:   #1B1F1B; /* разделитель строк внутри таблицы */
  --color-border-danger: #6B3434; /* обводка опасной кнопки */
  --color-border-danger-soft: #3A2323; /* рамка блока с причиной отказа */
  --color-border-warning:#3A3520; /* рамка блока-предупреждения */

  /* ---------- Цвет: текст ---------- */
  --color-text:          #FFFFFF; /* основной */
  --color-text-body:     #C9CFC9; /* длинный текст описания */
  --color-text-secondary:#9BA39C; /* вторичный, подписи полей */
  --color-text-muted:    #6E766F; /* плейсхолдеры, неактивное */
  --color-text-dim:      #5F665F; /* служебные надписи капсом */
  --color-text-on-accent:#0A0B0A; /* текст на зелёной заливке — чёрный, не белый */
  --color-text-disabled: #6E766F;

  /* ---------- Цвет: акцент (смысловой цвет денег) ---------- */
  --color-accent:        #35E07E;
  --color-accent-hover:  #7CF5A8;
  --color-accent-deep:   #23C46A;
  --color-accent-tint-06: rgba(53, 224, 126, 0.06); /* фон выбранной карточки */
  --color-accent-tint-08: rgba(53, 224, 126, 0.08);
  --color-accent-tint-10: rgba(53, 224, 126, 0.10); /* фон активного пункта меню */
  --color-accent-tint-12: rgba(53, 224, 126, 0.12); /* фон бейджа «Проверено» */
  --color-accent-tint-14: rgba(53, 224, 126, 0.14); /* иконка-плашка */
  --color-accent-tint-25: rgba(53, 224, 126, 0.25); /* граница своего сообщения в чате */

  /* ---------- Цвет: статусы ---------- */
  --color-success:       #35E07E;
  --color-success-tint:  rgba(53, 224, 126, 0.12);
  --color-warning:       #E0C435;
  --color-warning-tint:  rgba(224, 196, 53, 0.12);
  --color-warning-bg:    rgba(224, 196, 53, 0.06);
  --color-danger:        #E05A5A;
  --color-danger-tint:   rgba(224, 90, 90, 0.12);
  --color-danger-bg:     rgba(224, 90, 90, 0.06);
  --color-neutral-tint:  #1B1F1B;

  /* ---------- Градиенты ---------- */
  --gradient-accent:     linear-gradient(135deg, #7CF5A8, #23C46A); /* логотип, аватар, крупные плашки */
  --gradient-progress:   linear-gradient(90deg, #7CF5A8, #23C46A);  /* заливка прогресс-бара */
  --gradient-blob:       radial-gradient(circle, rgba(53,224,126,0.30), rgba(53,224,126,0) 65%); /* пятно на лендинге */
  --gradient-blob-soft:  radial-gradient(circle, rgba(53,224,126,0.16), rgba(10,11,10,0) 65%);
  --gradient-placeholder: repeating-linear-gradient(135deg, #161917 0 10px, #1B1F1B 10px 20px); /* заглушка изображения */
  --gradient-placeholder-dense: repeating-linear-gradient(135deg, #1B1F1B 0 6px, #232723 6px 12px);
  --gradient-skeleton:   linear-gradient(90deg, #181B18 0px, #1F231F 200px, #181B18 400px);
  --overlay-modal:       rgba(5, 6, 5, 0.72);
  --overlay-header:      rgba(10, 11, 10, 0.86);

  /* ---------- Шрифты ---------- */
  --font-display: "Unbounded", "Trebuchet MS", system-ui, sans-serif; /* заголовки и цифры */
  --font-body:    "Manrope", -apple-system, "Segoe UI", system-ui, sans-serif; /* весь интерфейс */
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; /* хэши, служебные подписи */

  /* ---------- Размеры текста ---------- */
  --fs-hero:   78px; /* H1 лендинга */
  --fs-h1:     44px; /* заголовок страницы проекта */
  --fs-h2:     40px; /* заголовок секции лендинга */
  --fs-h3:     34px; /* заголовок формы входа/блока доверия */
  --fs-h4:     32px; /* заголовок экрана кабинета */
  --fs-h5:     30px; /* заголовок экрана админки */
  --fs-h6:     22px; /* заголовок блока внутри страницы */
  --fs-num-xl: 44px; /* крупная цифра баланса */
  --fs-num-l:  40px; /* цифра платформы на лендинге */
  --fs-num-m:  28px; /* цифра плитки сводки */
  --fs-num-s:  22px; /* цифра в сайдбаре */
  --fs-lead:   18px; /* подзаголовок, краткое описание */
  --fs-body-l: 17px; /* название карточки */
  --fs-body:   16px; /* текст описания, кнопка основная */
  --fs-body-s: 15px; /* текст в полях, вторичный текст */
  --fs-ui:     14px; /* базовый интерфейсный размер */
  --fs-ui-s:   13px; /* подписи полей, мелкие кнопки */
  --fs-caption:12px; /* подписи, статусы */
  --fs-micro:  11px; /* ярлыки, служебное капсом */

  /* ---------- Начертания ---------- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800; /* только логотип */

  /* ---------- Межстрочные интервалы ---------- */
  --lh-hero:  0.96;
  --lh-tight: 1.05;
  --lh-heading: 1.3;
  --lh-ui:    1.4;
  --lh-body:  1.6;
  --lh-text:  1.7;
  --lh-list:  1.8;

  /* ---------- Межбуквенные интервалы ---------- */
  --ls-hero:    -0.02em;
  --ls-heading: -0.01em;
  --ls-none:    0;
  --ls-logo:    0.06em;
  --ls-label:   0.10em; /* подписи капсом */
  --ls-label-wide: 0.12em;
  --ls-eyebrow: 0.14em;
  --ls-eyebrow-wide: 0.16em;
  --ls-badge:   0.18em; /* служебная надпись в шапке прототипа */

  /* ---------- Шкала отступов ---------- */
  --space-1:  4px;
  --space-2:  6px;
  --space-3:  8px;
  --space-4:  10px;
  --space-5:  12px;
  --space-6:  14px;
  --space-7:  16px;
  --space-8:  18px;
  --space-9:  20px;
  --space-10: 22px;
  --space-11: 24px;
  --space-12: 26px;
  --space-13: 28px;
  --space-14: 32px;
  --space-15: 36px;
  --space-16: 40px;
  --space-17: 48px;
  --space-18: 56px;
  --space-19: 80px;
  --space-20: 96px;
  --space-21: 120px;

  /* ---------- Радиусы ---------- */
  --radius-xs:   7px;  /* ярлык категории */
  --radius-s:    9px;  /* мелкая кнопка, чип */
  --radius-m:    12px; /* кнопки и поля ввода */
  --radius-l:    14px; /* панель вкладок */
  --radius-xl:   16px; /* вложенный блок */
  --radius-2xl:  20px; /* карточка */
  --radius-3xl:  24px; /* крупная карточка, модальное окно */
  --radius-4xl:  28px; /* промо-блок лендинга */
  --radius-pill: 99px; /* прогресс-бар, счётчик, тумблер */

  /* ---------- Тени ---------- */
  --shadow-none:  none;
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-popover: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-toast: 0 16px 40px rgba(0, 0, 0, 0.50);
  --blur-header:  blur(14px);
  --blur-overlay: blur(6px);
  --blur-blob:    blur(30px);

  /* ---------- Толщины линий ---------- */
  --border-width: 1px;
  --border-width-accent: 2px; /* левая линия ответа автора */

  /* ---------- Анимации ---------- */
  --duration-fast:   120ms; /* смена цвета кнопки */
  --duration-normal: 200ms; /* раскрытие, поворот иконки */
  --duration-slow:   320ms; /* появление модального окна */
  --duration-blob:   18s;   /* дрейф градиентного пятна */
  --duration-blob-alt: 24s;
  --duration-skeleton: 1.4s;
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out:   ease-in-out;

  /* ---------- Размеры элементов ---------- */
  --control-height:    48px; /* кнопка и поле по умолчанию */
  --control-height-s:  40px;
  --control-height-l:  54px; /* основная кнопка сделки */
  --progress-height:   8px;  /* прогресс-бар на карточке */
  --progress-height-s: 6px;  /* прогресс-бар в строке списка */
  --progress-height-l: 12px; /* прогресс-бар на странице сбора */
  --avatar-s:  34px;
  --avatar-m:  40px;
  --avatar-l:  64px;
  --avatar-xl: 76px;
  --sidebar-width: 264px;
  --filters-width: 280px;
  --deal-width: 400px;
  --content-max: 1320px;
  --content-max-narrow: 1080px;
  --tap-target: 44px; /* минимальная зона нажатия на мобильном */

  /* ---------- Слои ---------- */
  --z-header: 60;
  --z-sticky: 70;
  --z-toolbar: 80;
  --z-modal: 100;
  --z-toast: 120;

  /* ---------- Брейкпоинты (для документации и media-запросов) ---------- */
  --bp-mobile: 480px;
  --bp-tablet: 768px;
  --bp-laptop: 1024px;
  --bp-desktop: 1280px;
}