@import 'tailwindcss';

@source '../js/admin/**/*.{vue,js}';

/*
 * Палитра снята пипеткой со скриншотов действующей KORZILLA: дизайн админки
 * повторяется 1:1, поэтому цвета здесь — не «подобранные похожие», а те же самые.
 */
@theme {
    --font-sans: 'Roboto', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';

    --color-kz-accent: #71c80a;
    --color-kz-accent-dark: #63b008;
    --color-kz-accent-soft: #f4fbe8;

    --color-kz-topbar: #292a2c;
    --color-kz-topbar-text: #d6d7d9;

    --color-kz-canvas: #e8e9ed;
    --color-kz-surface: #ffffff;

    --color-kz-text: #2b2c2e;
    --color-kz-muted: #9d9ea0;
    --color-kz-line: #e0e0e2;

    --color-kz-danger: #e2574c;
}

html,
body {
    height: 100%;
}

body {
    background: var(--color-kz-canvas);
    color: var(--color-kz-text);
    -webkit-font-smoothing: antialiased;
}

/*
 * Поле формы KORZILLA — подчёркивание, а не рамка: подпись стоит над полем
 * мелким серым, значение — обычным тёмным, снизу линия, зеленеющая по фокусу.
 * Вынесено в @utility, потому что повторяется в каждом типе поля рендерера.
 */
@utility kz-field {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--color-kz-line);
    border-radius: 0;
    padding: 0.25rem 0 0.4rem;
    font-size: 0.95rem;
    line-height: 1.5rem;
    color: var(--color-kz-text);
    outline: none;
    transition: border-color 0.15s ease;
}

@utility kz-field-focus {
    border-bottom-color: var(--color-kz-accent);
}

.kz-field:focus {
    border-bottom-color: var(--color-kz-accent);
}

.kz-field:disabled {
    color: var(--color-kz-muted);
}

.kz-label {
    display: block;
    font-size: 0.72rem;
    line-height: 1rem;
    color: var(--color-kz-muted);
}

/* Скроллбар в левом меню и модалках — тонкий, чтобы не рвать светлый фон. */
.kz-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--color-kz-line) transparent;
}