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

:root {
    /* Основные цвета приложения */
    --app-color-primary: #0091ff;
    --app-color-primary-rgb: 0, 145, 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-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;

    /* Отступы */
    --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);
}