/* app/static/css/base/variables.css */
/* CSS переменные для системы дизайна приложения */

:root {
    /* Основные цвета приложения */
    --app-color-primary: #007BFF;
    --app-color-primary-rgb: 0, 123, 255;

    --app-color-secondary: #6C757D;
    --app-color-secondary-rgb: 108, 117, 125;

    --app-color-success: #38aa3c;
    --app-color-success-rgb: 40, 167, 69;

    --app-color-danger: #DC3545;
    --app-color-danger-rgb: 220, 53, 69;

    --app-color-warning: #d8a20a;
    --app-color-warning-rgb: 255, 193, 7;

    --app-color-info: #17A2B8;
    --app-color-info-rgb: 23, 162, 184;

    /* Фоновые цвета */
    --app-color-bg-primary: #efefef;
    --app-color-bg-secondary: #F8F9FA;
    --app-color-bg-tertiary: #E9ECEF;
    --app-color-bg-body: #FFFFFF;

    /* Цвета текста */
    --app-color-text-primary: #212529;
    --app-color-text-secondary: #4f4f4f;
    --app-color-text-muted: #6C757D;
    --app-color-text-light: #dadada;
    --app-color-text-tertiary: #9f9f9f;
    --app-color-text-dark: #2e2e2e;

    /* Цвета границ */
    --app-color-border: #DEE2E6;
    --app-color-border-light: #E9ECEF;

    /* Цвета для компонентов */
    --app-color-link: var(--app-color-primary);
    --app-color-heading: var(--app-color-text-primary);
    --app-color-code: var(--app-color-danger);

    /* Тени */
    --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --app-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --app-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

    /* Переменные для кнопок */
    --app-btn-primary-color: var(--app-color-primary);
    --app-btn-primary-hover: color-mix(in srgb, var(--app-color-primary) 85%, black);
    --app-btn-primary-active: color-mix(in srgb, var(--app-color-primary) 70%, black);

    --app-btn-secondary-color: var(--app-color-secondary);
    --app-btn-secondary-hover: color-mix(in srgb, var(--app-color-secondary) 85%, black);
    --app-btn-secondary-active: color-mix(in srgb, var(--app-color-secondary) 70%, black);

    --app-btn-success-color: var(--app-color-success);
    --app-btn-success-hover: color-mix(in srgb, var(--app-color-success) 85%, black);
    --app-btn-success-active: color-mix(in srgb, var(--app-color-success) 70%, black);

    --app-btn-danger-color: var(--app-color-danger);
    --app-btn-danger-hover: color-mix(in srgb, var(--app-color-danger) 85%, black);
    --app-btn-danger-active: color-mix(in srgb, var(--app-color-danger) 70%, black);

    --app-btn-warning-color: var(--app-color-warning);
    --app-btn-warning-hover: color-mix(in srgb, var(--app-color-warning) 85%, black);
    --app-btn-warning-active: color-mix(in srgb, var(--app-color-warning) 70%, black);

    --app-btn-info-color: var(--app-color-info);
    --app-btn-info-hover: color-mix(in srgb, var(--app-color-info) 85%, black);
    --app-btn-info-active: color-mix(in srgb, var(--app-color-info) 70%, black);

    --app-btn-ghost-hover-bg: rgba(0, 0, 0, 0.05);

    /* Типографика */
    --app-font-family-sans: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --app-font-family-mono: 'SFMono-Regular', Consolas, monospace;


    /* Размеры шрифтов по типографической шкале */
    --app-font-size-xs: 0.75rem;
    --app-font-size-sm: 0.875rem;
    --app-font-size-base: 1rem;
    --app-font-size-lg: 1.125rem;
    --app-font-size-xl: 1.25rem;
    --app-font-size-2xl: 1.5rem;
    --app-font-size-3xl: 1.875rem;
    --app-font-size-4xl: 2.25rem;

    /* Межстрочные интервалы */
    --app-line-height-tight: 1.25;
    --app-line-height-normal: 1.5;
    --app-line-height-relaxed: 1.75;

    /* Отступы по 4px сетке */
    --app-spacing-xs: 0.25rem;
    --app-spacing-sm: 0.5rem;
    --app-spacing-md: 1rem;
    --app-spacing-lg: 1.5rem;
    --app-spacing-xl: 2rem;
    --app-spacing-2xl: 3rem;

    /* Скругления углов */
    --app-radius-sm: 0.25rem;
    --app-radius-md: 0.375rem;
    --app-radius-lg: 0.5rem;
    --app-radius-xl: 0.75rem;
    --app-radius-full: 9999px;

    /* Длительности анимаций */
    --app-transition-fast: 150ms;
    --app-transition-normal: 250ms;
    --app-transition-slow: 350ms;

    /* Уровни z-index */
    --app-z-dropdown: 1000;
    --app-z-sticky: 1020;
    --app-z-fixed: 1030;
    --app-z-modal: 1050;
    --app-z-popover: 1060;
    --app-z-tooltip: 1070;
}

/* Темная тема */
[data-theme="dark"] {
    --app-color-bg-primary: #131415;
    --app-color-bg-secondary: #212529;
    --app-color-bg-tertiary: #495057;
    --app-color-bg-body: #212529;

    --app-color-text-primary: #E9ECEF;
    --app-color-text-secondary: #CED4DA;
    --app-color-text-muted: #ADB5BD;

    --app-color-border: #495057;
    --app-color-border-light: #6C757D;

    --app-color-heading: #FFFFFF;

    --app-shadow-sm: 0 1px 2px rgba(255, 255, 255, 0.05);
    --app-shadow-md: 0 4px 6px rgba(255, 255, 255, 0.07);
    --app-shadow-lg: 0 10px 15px rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   ЦВЕТОВЫЕ УТИЛИТЫ
   ========================================================================== */

/* Цвета текста */
.app-text-primary { color: var(--app-color-primary) !important; }
.app-text-secondary { color: var(--app-color-secondary) !important; }
.app-text-success { color: var(--app-color-success) !important; }
.app-text-danger { color: var(--app-color-danger) !important; }
.app-text-warning { color: var(--app-color-warning) !important; }
.app-text-info { color: var(--app-color-info) !important; }
.app-text-muted { color: var(--app-color-text-muted) !important; }
.app-text-light { color: var(--app-color-text-secondary) !important; }
.app-text-white { color: white !important; }

/* Цвета фона */
.app-bg-primary { background-color: var(--app-color-primary) !important; }
.app-bg-secondary { background-color: var(--app-color-secondary) !important; }
.app-bg-tertiary { background-color: var(--app-color-bg-tertiary) !important; }
.app-bg-success { background-color: var(--app-color-success) !important; }
.app-bg-danger { background-color: var(--app-color-danger) !important; }
.app-bg-warning { background-color: var(--app-color-warning) !important; }
.app-bg-info { background-color: var(--app-color-info) !important; }
.app-bg-transparent { background-color: transparent !important; }
.app-bg-white { background-color: white !important; }
.app-bg-body { background-color: var(--app-color-bg-body) !important; }

/* Цвета границ */
.app-border-primary { border-color: var(--app-color-primary) !important; }
.app-border-secondary { border-color: var(--app-color-border) !important; }
.app-border-success { border-color: var(--app-color-success) !important; }
.app-border-danger { border-color: var(--app-color-danger) !important; }
.app-border-warning { border-color: var(--app-color-warning) !important; }
.app-border-info { border-color: var(--app-color-info) !important; }