/* ============================================================
   Альфа-Инсайты — дизайн-токены в стилистике Альфа-Бизнеса
   Хакатон Альфа Хак 2026 · кейс «Новостная аналитика»
   ============================================================ */

:root {
    /* бренд */
    --alfa-red:        #EF3124;
    --alfa-red-hover:  #D92417;
    --alfa-red-soft:   #FDECEA;

    /* нейтраль */
    --ink:      #0D0D0D;
    --ink-80:   #3A3D46;
    --bg:       #F2F3F5;
    --card:     #FFFFFF;
    --muted:    #6C6E79;
    --line:     #E7E9EE;

    /* акценты — канон дизайн-системы @alfalab/core-components (core-ds, MIT) */
    --violet:      #6A4DFF;   /* --color-static-brand-violet */
    --violet-ink:  #6A4DFF;
    --violet-soft: #EFECFF;
    --green:       #228C68;   /* --color-light-qualitative-flexible-4 */
    --green-soft:  #E8F5E1;
    --blue:        #5388E0;   /* --color-light-qualitative-monocolor-blue */
    --blue-ink:    #2E5FAF;   /* текст на blue-soft */
    --blue-soft:   #E3F0FF;
    --amber:       #C77700;
    --amber-soft:  #FFF2DB;

    /* неоновая бренд-палитра — микро-акценты AI-компонентов */
    --neon-teal:   #00E8F0;   /* --color-static-brand-bright-blue */
    --neon-lime:   #A8F000;   /* --color-static-brand-warm-green */
    --neon-green:  #31E300;   /* --color-static-brand-green */

    /* ИИ-градиент (шар Альфа-Интеллекта) */
    --grad-ai: linear-gradient(135deg, #FF4C64 0%, #FF2E9E 100%);

    /* геометрия и тени */
    --r-lg: 20px;
    --r-md: 14px;
    --r-sm: 10px;
    --shadow-card: 0 6px 24px rgba(13, 13, 13, .05), 0 1px 2px rgba(13, 13, 13, .04);
    --shadow-pop:  0 16px 48px rgba(13, 13, 13, .14);

    --font: 'Golos Text', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

button, input, textarea { font-family: inherit; }

/* --- кнопки --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, background .2s, border-color .2s;
}

.btn-primary {
    width: 100%;
    padding: 13px;
    background: var(--alfa-red);
    color: #fff;
}
.btn-primary:hover:not(:disabled) { background: var(--alfa-red-hover); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(239, 49, 36, .35); }
.btn-primary:active:not(:disabled) { transform: translateY(0); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }

/* кнопка тестового режима — пунктир, как «необязательные» пункты меню Альфы */
.btn-demo {
    width: 100%;
    padding: 13px;
    background: #fff;
    border: 1.5px dashed #D9DBE2;
    color: var(--ink);
    border-radius: 12px;
}
.btn-demo:hover { background: #F6F7F9; border-color: var(--alfa-red); color: var(--alfa-red); }

/* --- поля --- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink-80); }
.field input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--line);
    border-radius: var(--r-sm);
    font-size: 15px;
    background: #F7F8FA;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.field input:focus {
    border-color: var(--alfa-red);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(239, 49, 36, .12);
}

/* --- бейджи источников --- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.badge--bank { background: var(--violet-soft); color: var(--violet-ink); }
.badge--ai   { background: #F0F1F4; color: #4A4D57; }
.badge--red  { background: var(--alfa-red-soft); color: var(--alfa-red); }
.badge--green{ background: var(--green-soft); color: var(--green); }
.badge--blue { background: var(--blue-soft); color: var(--blue-ink); }
.badge--amber{ background: var(--amber-soft); color: var(--amber); }

/* --- логотип --- */
.logo-a {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 10px;
    background: var(--alfa-red);
    color: #fff;
    font-weight: 800;
    font-size: 20px;
    display: grid;
    place-items: center;
    letter-spacing: -1px;
}