/* ==========================================================================
   Дизайн-система Doings — единственный источник значений.
   Витрина для администраторов: /secure-admin/design-system/

   Правило: цвета, размеры шрифта, начертания, скругления и тени в CSS и
   шаблонах берутся только отсюда: var(--ds-...). Нового значения «по месту»
   не бывает: если чего-то не хватает, сначала решаем, нужно ли оно системе.
   ========================================================================== */
:root {
    /* ---- Цвета: 16 ---- */
    --ds-ink: #1a1a1a;              /* основной текст, главные кнопки, иконки */
    --ds-ink-hover: #333333;        /* наведение на чёрное */
    --ds-ink-soft: #555555;         /* второстепенный текст */
    --ds-muted: #999999;            /* подписи, плейсхолдеры, неактивное */
    --ds-border: #e5e5e5;           /* рамки, разделители */
    --ds-surface: #f5f5f5;          /* фон полей, плашек, второстепенных кнопок */
    --ds-white: #ffffff;            /* фон страницы и карточек */

    --ds-yellow: #ffde00;           /* акцент бренда */
    --ds-yellow-hover: #e6c700;
    --ds-yellow-bg: #fff6cc;        /* мягкая подсветка, «внимание» */

    --ds-green: #126e4d;            /* успех, деньги, одобрено */
    --ds-green-hover: #0e5a3f;
    --ds-green-bg: #e8f5ee;

    --ds-red: #dc3545;              /* ошибка, опасное действие */
    --ds-red-hover: #b02a37;
    --ds-red-bg: #fdecee;

    /* ---- Шрифт: 5 размеров, 4 начертания ---- */
    --ds-font: 'Poppins', sans-serif;
    --ds-text-sm: 12px;             /* подписи, бейджи, мета */
    --ds-text-base: 14px;           /* основной текст, кнопки */
    --ds-text-lg: 16px;             /* поля ввода, выделенный текст, крупные кнопки */
    --ds-text-xl: 20px;             /* заголовки блоков и модалок */
    --ds-text-2xl: 28px;            /* заголовок страницы, крупные цифры */
    --ds-weight-regular: 400;
    --ds-weight-medium: 500;
    --ds-weight-semibold: 600;
    --ds-weight-bold: 700;

    /* ---- Скругления: 3 ---- */
    --ds-radius: 8px;               /* поля, кнопки, мелкие элементы */
    --ds-radius-lg: 12px;           /* карточки, модалки, панели */
    --ds-radius-pill: 999px;        /* чипы, бейджи, круглые кнопки (круг — 50%) */

    /* ---- Тени: 2 + фокус ---- */
    --ds-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);      /* карточки, плашки */
    --ds-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.16);  /* модалки, выпадающие меню */
    --ds-focus: 0 0 0 3px rgba(255, 222, 0, 0.4);     /* обводка фокуса */

    /* ---- Отступы ---- */
    --ds-space-1: 4px;
    --ds-space-2: 8px;
    --ds-space-3: 12px;
    --ds-space-4: 16px;
    --ds-space-6: 24px;
    --ds-space-8: 32px;

    --ds-transition: 0.2s ease-in-out;
}