/* ============================================================
   AI Script Generator — Web Edition
   tokens.css — единый источник дизайн-токенов приложения

   Визуальное направление: «Графит» — нейтральная тёмная гамма
   (стиль современных AI-продуктов: ChatGPT / Claude / Linear).

   Файл содержит ТОЛЬКО переменные (значения), без стилей
   компонентов. Подключается ПЕРВЫМ, до style.css / login.css.

   Структура:
     1. Тема-зависимые токены: тёмная тема (по умолчанию)
     2. Тема-зависимые токены: светлая тема
     3. Тема-независимые токены (типографика, размеры, z-index)
   ============================================================ */

/* ============================================================
   1. ТЕМА-ЗАВИСИМЫЕ ТОКЕНЫ — ТЁМНАЯ ТЕМА «ГРАФИТ» (по умолчанию)
   ============================================================ */
:root,
[data-theme="dark"] {
    /* --- Фоновые цвета (нейтральная шкала серых) --- */
    --color-bg-primary: #101014;      /* рабочая область чата */
    --color-bg-secondary: #17171c;    /* сайдбар, шапка, панели */
    --color-bg-tertiary: #26262e;     /* инлайн-код, шапки блоков кода */
    --color-bg-hover: #1f1f25;
    --color-bg-active: #26262e;

    /* --- Фон блоков кода (темнее фона чата — «утоплены») --- */
    --color-bg-code: #0c0c10;

    /* --- Поверхности --- */
    --color-surface: #1a1a20;         /* модальные окна */
    --color-surface-raised: #1e1e24;  /* карточки, приподнятые элементы */
    --color-surface-overlay: rgba(8, 8, 12, 0.6);

    /* --- «Стекло»: полупрозрачный фон шапки/панелей (с blur) --- */
    --color-glass: rgba(23, 23, 28, 0.72);

    /* --- Волосные разделители (тоньше обычных границ) --- */
    --color-hairline: rgba(255, 255, 255, 0.07);

    /* --- Текст --- */
    --color-text-primary: #ededf0;
    --color-text-secondary: #a6a6b0;
    --color-text-muted: #6f6f7a;
    --color-text-placeholder: #6f6f7a;
    /* Текст на акцентной заливке (кнопки, бейджи) */
    --color-text-inverse: #ffffff;

    /* --- Акценты --- */
    --color-accent: #5b8cff;
    --color-accent-hover: #78a1ff;
    --color-accent-active: #4577f2;

    /* --- Статусы --- */
    --color-success: #4ade80;
    --color-warning: #fbbf24;
    --color-error: #f87171;

    /* --- Текст на цветных заливках статусов
           (тёмный — для контраста на ярких цветах 300-уровня) --- */
    --color-on-success: #052e16;
    --color-on-warning: #241a04;
    --color-on-error: #2b0808;

    /* --- Подложки статусов --- */
    --color-error-bg: rgba(248, 113, 113, 0.12);

    /* --- Границы (тонкие, едва заметные) --- */
    --color-border: #26262e;
    --color-border-light: #33333c;

    /* --- Тени (глубокие, мягкие — глубина вместо рамок) --- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);

    /* --- Фокус (свечение вокруг активного поля ввода) --- */
    --focus-ring: 0 0 0 3px rgba(91, 140, 255, 0.28);
}

/* ============================================================
   2. ТЕМА-ЗАВИСИМЫЕ ТОКЕНЫ — СВЕТЛАЯ ТЕМА «ГРАФИТ»
   (переопределяют только значения тёмной темы)
   ============================================================ */
[data-theme="light"] {
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f7f7f8;
    --color-bg-tertiary: #ececef;
    --color-bg-hover: #f1f1f3;
    --color-bg-active: #e8e8eb;

    --color-bg-code: #f6f6f8;

    --color-surface: #ffffff;
    --color-surface-raised: #f7f7f8;
    --color-surface-overlay: rgba(24, 24, 28, 0.4);

    --color-glass: rgba(255, 255, 255, 0.75);
    --color-hairline: rgba(0, 0, 0, 0.07);

    --color-text-primary: #1a1a20;
    --color-text-secondary: #57575f;
    --color-text-muted: #8b8b94;
    --color-text-placeholder: #8b8b94;
    --color-text-inverse: #ffffff;

    --color-accent: #3b6ef0;
    --color-accent-hover: #2f5ede;
    --color-accent-active: #2a55c9;

    /* В светлой теме статусы темнее — читаются на белом,
       текст на них белый */
    --color-success: #16a34a;
    --color-warning: #d97706;
    --color-error: #dc2626;

    --color-on-success: #ffffff;
    --color-on-warning: #ffffff;
    --color-on-error: #ffffff;

    --color-error-bg: rgba(220, 38, 38, 0.08);

    --color-border: #e8e8ec;
    --color-border-light: #f0f0f3;

    --shadow-sm: 0 1px 2px rgba(16, 16, 20, 0.06);
    --shadow-md: 0 4px 12px rgba(16, 16, 20, 0.08);
    --shadow-lg: 0 16px 40px rgba(16, 16, 20, 0.14);

    --focus-ring: 0 0 0 3px rgba(59, 110, 240, 0.22);
}

/* ============================================================
   3. ТЕМА-НЕЗАВИСИМЫЕ ТОКЕНЫ
   (одинаковы в тёмной и светлой теме)
   ============================================================ */
:root {
    /* --- Скругления (крупнее прежних — мягкие современные формы) --- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* --- Типографика --- */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;

    /* --- Размеры layout --- */
    --sidebar-width: 280px;
    --project-panel-width: 320px;
    /* Уже прежних 900px — «колонка диалога» как в современных чатах */
    --chat-max-width: 800px;
    --header-height: 56px;
    --input-area-min-height: 70px;

    /* --- Высота окна приложения ---
       100vh — запасной вариант для старых браузеров,
       100dvh — динамическая высота (не обрезает низ на мобильных) */
    --app-height: 100vh;

    /* --- Переходы --- */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s ease;

    /* --- Размытие для «стеклянных» поверхностей --- */
    --glass-blur: 14px;

    /* --- Z-index уровни (порядок наложения слоёв интерфейса) --- */
    --z-sticky: 50;    /* оверлей drag & drop */
    --z-sidebar: 100;  /* боковая панель (на мобильных) */
    --z-modal: 1000;   /* модальные окна */
    --z-toast: 2000;   /* toast-уведомления */
}

/* Поддержка динамической высоты окна браузера (dvh):
   переопределяем --app-height только там, где dvh поддерживается */
@supports (height: 100dvh) {
    :root {
        --app-height: 100dvh;
    }
}