/* =================================================================
   Portal-Alpateks — Design Tokens
   Единое место для всех UI-токенов (цвета, отступы, шрифты, кнопки).
   Подключается ПЕРЕД main.css: <link rel="stylesheet" href="design-tokens.css">
   <link rel="stylesheet" href="main.css">
   Все компоненты ссылаются на токены через var(--token-name), поэтому
   любое глобальное изменение здесь меняет UI целиком.
   ================================================================= */

:root {
    /* =========================================================
       Цвета — палитра
       ========================================================= */
    --color-bg: #f1f5f9;
    --color-surface: #ffffff;
    --color-surface-2: #f8fafc;
    --color-text: #0f172a;
    --color-text-muted: #64748b;
    --color-text-inverse: #ffffff;
    --color-border: #e2e8f0;
    --color-border-strong: #cbd5e1;

    /* Брендовые и семантические */
    --color-primary: #1e293b;
    --color-primary-hover: #0f172a;
    --color-accent: #3b82f6;
    --color-accent-hover: #2563eb;
    --color-success: #16a34a;
    --color-error: #dc2626;
    --color-error-hover: #b91c1c;
    --color-warning: #f59e0b;

    /* Telegram-бренд */
    --color-telegram: #229ED9;
    --color-telegram-bg: #ffffff;
    --color-telegram-hover-bg: #229ED9;
    --color-telegram-hover-text: #ffffff;

    /* =========================================================
       Радиусы и тени
       ========================================================= */
    --radius: 8px;
    --radius-sm: 4px;
    --radius-lg: 12px;
    --radius-pill: 9999px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.12);

    /* =========================================================
       Шрифты
       ========================================================= */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'SF Mono', Monaco, Consolas, 'Courier New', monospace;
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 13px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 22px;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.2;
    --line-height: 1.5;

    /* =========================================================
       Отступы и размеры
       ========================================================= */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;

    /* =========================================================
       Кнопки -- единый стиль outline (по требованию заказчика)
       Все варианты .btn-* ссылаются на эти токены.
       ========================================================= */
    --btn-padding-y: 4px;
    --btn-padding-x: 10px;
    --btn-font-size: 13px;
    --btn-font-weight: 600;
    --btn-border-width: 1.5px;
    --btn-radius: var(--radius);
    --btn-line-height: 1;

    /* outline-вариант по умолчанию */
    --btn-bg: var(--color-surface);
    --btn-color: var(--color-text);
    --btn-border-color: var(--color-border-strong);

    /* hover -- заливка */
    --btn-hover-bg: var(--color-primary);
    --btn-hover-color: var(--color-text-inverse);
    --btn-hover-border-color: var(--color-primary);

    /* primary (синяя заливка -- основное действие) */
    --btn-primary-bg: var(--color-accent);
    --btn-primary-color: var(--color-text-inverse);
    --btn-primary-border-color: var(--color-accent);
    --btn-primary-hover-bg: var(--color-accent-hover);
    --btn-primary-hover-color: var(--color-text-inverse);
    --btn-primary-hover-border-color: var(--color-accent-hover);

    /* ghost (прозрачная -- второстепенное действие) */
    --btn-ghost-bg: transparent;
    --btn-ghost-color: var(--color-text-muted);
    --btn-ghost-border-color: transparent;
    --btn-ghost-hover-bg: var(--color-surface-2);
    --btn-ghost-hover-color: var(--color-text);

    /* danger (красная -- разрушительное действие) */
    --btn-danger-bg: var(--color-error);
    --btn-danger-color: var(--color-text-inverse);
    --btn-danger-border-color: var(--color-error);
    --btn-danger-hover-bg: var(--color-error-hover);
    --btn-danger-hover-color: var(--color-text-inverse);
    --btn-danger-hover-border-color: var(--color-error-hover);

    /* =========================================================
       Поля ввода (input, select, textarea) -- единый стиль
       ========================================================= */
    --input-padding-y: 6px;
    --input-padding-x: 10px;
    --input-font-size: 13px;
    --input-line-height: 1.4;
    --input-radius: var(--radius);
    --input-border-width: 1px;
    --input-bg: var(--color-surface);
    --input-color: var(--color-text);
    --input-border-color: var(--color-border);
    --input-placeholder-color: var(--color-text-muted);
    --input-focus-border-color: var(--color-accent);
    --input-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.12);
}