/*
 * Дизайн-токены. Меняй только значения переменных чтобы перекрасить всё приложение.
 * Переменные сгруппированы по смыслу: цвет, пространство, типографика, радиусы, тени.
 */

:root {
    /* ===== Brand (доминирующий цвет) — тёмная навигация ===== */
    --brand-50:  #e6eef3;
    --brand-100: #ccdde7;
    --brand-200: #99bbcf;
    --brand-300: #6698b7;
    --brand-400: #33759f;
    --brand-500: #005287;
    --brand-600: #00426c;
    --brand-700: #003252;
    --brand-800: #002238;
    --brand-900: #001520;

    /* ===== Accent (точечные акценты) — корпоративный бирюзовый ===== */
    --accent-50:  #e6f7fc;
    --accent-100: #b3e8f6;
    --accent-300: #66cfee;
    --accent-500: #00b2e0;
    --accent-600: #0091b8;
    --accent-700: #00708f;

    /* ===== Нейтральные ===== */
    --gray-50:  #f8f9fa;
    --gray-100: #e9ecef;
    --gray-200: #dee2e6;
    --gray-300: #ced4da;
    --gray-400: #adb5bd;
    --gray-500: #6c757d;
    --gray-600: #495057;
    --gray-700: #343a40;
    --gray-800: #212529;
    --gray-900: #0b0f12;
    --gray-950: #050709;

    /* ===== Статусы ===== */
    --green-100: #d1e7dd;
    --green-500: #198754;
    --green-600: #14653f;
    --amber-100: #fff3cd;
    --amber-500: #ffc107;
    --amber-600: #b77800;
    --amber-900: #553500;
    --red-100:   #f5d5de;
    --red-300:   #d58da2;
    --red-500:   #973754;
    --red-600:   #7a2943;
    --red-900:   #3d1422;
    --blue-400:  #66cfee;

    /* ===== Семантические токены — используются в разметке ===== */

    /* Поверхности */
    --color-background:       var(--gray-50);
    --color-surface:          #ffffff;
    --color-surface-muted:    var(--gray-100);
    --color-surface-inverse:  var(--brand-900);

    /* Текст */
    --color-text:             var(--brand-900);
    --color-text-secondary:   var(--gray-600);
    --color-text-muted:       var(--gray-500);
    --color-text-inverse:     #ffffff;

    /* Границы */
    --color-border:           var(--gray-200);
    --color-border-strong:    var(--gray-300);

    /* Primary — бирюзовый, доминирующий */
    --color-primary:          var(--accent-500);
    --color-primary-hover:    var(--accent-600);
    --color-primary-subtle:   var(--accent-50);
    --color-primary-text:     var(--accent-700);
    --color-on-primary:       #ffffff;

    /* Accent — тёмный navy как вторичный акцент */
    --color-accent:           var(--brand-900);
    --color-accent-hover:     var(--brand-700);
    --color-accent-subtle:    var(--brand-50);
    --color-accent-text:      var(--brand-800);
    --color-focus-ring:       rgba(0, 178, 224, 0.25);

    /* Статусы */
    --color-success:          var(--green-600);
    --color-success-bg:       var(--green-100);
    --color-warning:          var(--amber-600);
    --color-warning-bg:       var(--amber-100);
    --color-danger:           var(--red-500);
    --color-danger-bg:        var(--red-100);
    --color-danger-text:      var(--red-600);
    --color-info:             var(--accent-500);
    --color-info-bg:          var(--accent-50);

    /* ===== Типографика ===== */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --font-mono: 'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', 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;
    --font-size-2xl:  1.5rem;
    --font-size-3xl:  2rem;

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;

    /* ===== Пространство ===== */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* ===== Радиусы ===== */
    --radius-sm: 4px;
    --radius:    8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;

    /* ===== Тени ===== */
    --shadow-sm:  0 1px 2px rgba(0, 21, 32, 0.06);
    --shadow:     0 4px 12px rgba(0, 21, 32, 0.10);
    --shadow-lg:  0 12px 32px rgba(0, 21, 32, 0.15);

    /* ===== Transition ===== */
    --transition: 150ms ease;
}

/* Тёмная тема — для debug-страниц */
[data-theme="dark"] {
    --color-background:      var(--brand-900);
    --color-surface:          #002a43;
    --color-surface-muted:    #003857;
    --color-surface-inverse:  #ffffff;

    --color-text:            #e2eaf0;
    --color-text-secondary:  #8aa4b6;
    --color-text-muted:      #5d7788;
    --color-text-inverse:    var(--brand-900);

    --color-border:          #003857;
    --color-border-strong:   #004a70;

    --color-primary:         var(--accent-500);
    --color-primary-hover:   var(--accent-300);
    --color-primary-subtle:  #003857;
    --color-primary-text:    var(--accent-300);
    --color-on-primary:      var(--brand-900);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow:    0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* ===== Базовые стили ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background: var(--color-background);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--color-primary-text);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover { color: var(--color-primary-hover); text-decoration: underline; }

code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--color-surface-muted);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

/* ===== Кнопки ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font: inherit;
    font-weight: 500;
    color: var(--color-on-primary);
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
    text-decoration: none;
}
.btn:hover { background: var(--color-primary-hover); text-decoration: none; color: var(--color-on-primary); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.btn-secondary {
    color: var(--color-text);
    background: var(--color-surface-muted);
}
.btn-secondary:hover { background: var(--color-border); color: var(--color-text); }

.btn-accent {
    background: var(--color-accent);
    color: #ffffff;
}
.btn-accent:hover { background: var(--color-accent-hover); color: #ffffff; }

.btn-block { width: 100%; }

/* ===== Поля ввода ===== */
.input, input[type="text"], input[type="password"], input[type="email"], select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font: inherit;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: border-color var(--transition), box-shadow var(--transition);
    box-sizing: border-box;
}
.input:focus, input:focus, select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.field { margin-bottom: var(--space-4); }
.field label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

/* ===== Карточки ===== */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
}

/* ===== Бейджи ===== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: 600;
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
    color: var(--color-text-secondary);
}
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-success::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--color-success);
}
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-danger  { background: var(--color-danger-bg);  color: var(--color-danger-text); }
.badge-info    { background: var(--color-info-bg);    color: var(--color-primary-text); }

/* ===== Баннер (полноэкранное уведомление сверху) ===== */
.banner {
    padding: var(--space-3) var(--space-6);
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 500;
}
.banner-danger  { background: var(--color-danger);  color: var(--color-text-inverse); }
.banner-warning { background: var(--color-warning); color: var(--color-text-inverse); }

/* ===== Алерты (встраиваемые сообщения) ===== */
.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-4);
    border-left: 3px solid var(--color-border);
}
.alert-danger { background: var(--color-danger-bg); color: var(--color-danger-text); border-color: var(--color-danger); }
.alert-info   { background: var(--color-info-bg);   color: var(--color-primary-text); border-color: var(--color-primary); }

/* ===== Вспомогательное ===== */
.text-muted { color: var(--color-text-muted); }
.text-small { font-size: var(--font-size-sm); }
.text-center { text-align: center; }