/* ============================================
   KAI — ОБЩИЕ СТИЛИ ФРОНТЕНДА
   Токены плагина + базовые кнопки.
   Хардкод бренда запрещён: только var().
   Бренд подставляется сайтом через :root.
   ============================================ */

:root {
    /* --- Фоны --- */
    --kai-bg:            #FFFFFF;
    --kai-bg-alt:        #F7F8FA;
    --kai-surface:       #FFFFFF;
    --kai-surface-2:     #F7F8FA;

    /* --- Границы --- */
    --kai-border:        #E2E8F0;
    --kai-border-light:  #EEF1F5;

    /* --- Текст --- */
    --kai-text:          #0F172A;
    --kai-text-muted:    #475569;
    --kai-text-dim:      #64748B;
    --kai-text-faint:    #94A3B8;

    /* --- Акцент: нейтральный дефолт.
           Сайт переопределяет значения под свой бренд. --- */
    --kai-accent:            #1E293B;
    --kai-accent-hover:      #0F172A;
    --kai-accent-soft:       #F1F5F9;
    --kai-accent-line:       #E2E8F0;
    --kai-accent-text:       #FFFFFF;
    --kai-accent-ring:       rgba(30, 41, 59, .20);
    --kai-accent-shadow:     rgba(30, 41, 59, .25);
    --kai-accent-shadow-hover: rgba(30, 41, 59, .35);
    --kai-accent-disabled:   #CBD5E1;

    /* --- Шрифты --- */
    --kai-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --kai-fs-xs: 11px;
    --kai-fs-sm: 13px;
    --kai-fs-md: 14px;
    --kai-fs-lg: 16px;
    --kai-fs-xl: 22px;
    --kai-fs-xxl: 32px;

    /* --- Геометрия --- */
    --kai-radius-sm: 6px;
    --kai-radius:    8px;
    --kai-radius-lg: 12px;
    --kai-gap:       20px;
    --kai-shadow:    0 1px 3px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .04);
    --kai-shadow-lg: 0 4px 16px rgba(15, 23, 42, .10);
}

.kai-single-car,
.kai-archive,
.car-card,
.kai-calculator {
    font-family: var(--kai-font);
    color: var(--kai-text);
}

/* ============================================
   БАЗОВЫЕ КНОПКИ ПЛАГИНА
   Единственная версия — в этом файле.
   single-car.css и calculator.css
   своих .kai-btn-primary не объявляют.
   ============================================ */
.kai-btn-primary {
    display: block;
    background: var(--kai-accent);
    color: var(--kai-accent-text);
    text-align: center;
    padding: 14px;
    border-radius: var(--kai-radius);
    text-decoration: none;
    font-weight: 600;
    margin-bottom: 10px;
    transition: background .2s, box-shadow .2s;
}
.kai-btn-primary:hover { background: var(--kai-accent-hover); }
.kai-btn-primary:focus-visible {
    outline: 3px solid var(--kai-accent-ring);
    outline-offset: 2px;
}

.kai-btn-secondary {
    display: block;
    background: var(--kai-bg);
    border: 1px solid #CBD5E1;
    color: var(--kai-text);
    text-align: center;
    padding: 14px;
    border-radius: var(--kai-radius);
    text-decoration: none;
    margin-bottom: 15px;
    transition: border-color .2s, background .2s;
}
.kai-btn-secondary:hover {
    border-color: var(--kai-accent);
    background: var(--kai-accent-soft);
}
.kai-btn-secondary:focus-visible {
    outline: 3px solid var(--kai-accent-ring);
    outline-offset: 2px;
}