// =============================================================================
// Glint Design System — Master Stylesheet (main.glts)
// =============================================================================

// ── 1. Цветовая палитра и константы (Variables) ──────────────────────────────
$bg-app        = #11111b  // Глубокий темный фон для всего окна
$bg-panel      = #1e1e2e  // Базовый цвет для контейнеров и панелей
$bg-surface    = #313244  // Цвет для карточек и выделенных блоков
$bg-field      = #181825  // Внутренний фон для полей ввода (Input)

$text-main     = #cdd6f4  // Мягкий белый основной текст
$text-muted    = #9399b2  // Серый приглушенный текст для описаний
$accent        = #b4befe  // Лавандовый акцентный цвет для кнопок и заголовков
$border-glow   = #45475a  // Цвет аккуратных рамок и разделителей

// Сетка отступов (Размеры автоматически очищаются от "px" парсером Glint)
$pad-dense     = 6px
$pad-normal    = 12px
$pad-roomy     = 20px
$pad-window    = 28px

// ── 2. Шаблоны стилей (Mixins) ───────────────────────────────────────────────

@mixin text-body {
    color: $text-main
    font-size: 15px
}

@mixin standard-card {
    background: $bg-panel
    border-color: $border-glow
    border-width: 1px
    border-radius: 12px
}

// ── 3. Правила для UI-компонентов (Element Rules) ────────────────────────────

// Главное окно приложения
Window {
    background: $bg-app
    padding: $pad-window
    spacing: $pad-roomy
}

// Универсальный контейнер ( viewport, карточки, обертки списков )
Panel {
    @use standard-card
    padding: $pad-normal
    gap: 14px
    direction: vertical
    align-items: center
    content-align: center
}

// Крупные заголовки секций
Header {
    color: $accent
    font-size: 22px
    padding: 4px
}

// Обычный текст
Text {
    @use text-body
}

// Подписи, второстепенные метаданные
Label {
    color: $text-muted
    font-size: 13px
}

// Интерактивные элементы управления
Button {
    border-radius: 8px
    border-width: 1px
}

Image {
    border-radius: 8px
    border-width: 1px
}

// Текстовые поля ввода
Input {
    background-color: $bg-field
    color: $text-main
    font-size: 14px
    padding: 12px
    border-radius: 16px
    border-width: 1px
    border-color: $border-glow
    width: 320px
}

// Переключатели
Toggle {
    color: $text-main
    font-size: 15px
}

// Разделительные линии (Divider / Separator)
Divider {
    background: $border-glow
    border-width: 1px
}