/*
 * Kanata AI Surveys — minimal base stylesheet.
 *
 * A deliberately small, independently-maintained subset of the brand
 * utility classes the feedback templates rely on (container, card, title,
 * input, button). Extracted once from kanata-ai-ongarde's brand stylesheet
 * when this plugin was forked out — not kept in sync with it afterward.
 *
 * Every color/font/radius below is a CSS custom property with a default
 * value equal to the original Kanata AI brand palette, so nothing changes
 * out of the box. A site running this plugin under different branding can
 * override any of these — either with its own CSS (these are ordinary
 * inheritable custom properties) or via the `kanata_ai_surveys_theme` PHP
 * filter, which prints a :root override block ahead of this stylesheet.
 * See README.md "Theming".
 */

:root {
    --kas-text: #3D3D3D;
    --kas-surface: #ffffff;
    --kas-bg-subtle: #FBF7F0;
    --kas-border: rgba(61, 61, 61, 0.1);
    --kas-input-border: rgba(61, 61, 61, 0.2);
    --kas-accent: #E23838;
    --kas-accent-hover: #c92e2e;
    --kas-accent-contrast: #ffffff;
    --kas-radius: 12px;
    --kas-radius-sm: 8px;
    --kas-font-heading: 'Fredoka', 'Montserrat', sans-serif;
    --kas-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.kanata-ai-container {
    max-width: 960px;
    margin: 24px auto;
    font-family: var(--kas-font-body, 'Inter', sans-serif);
    color: var(--kas-text, #3D3D3D);
    line-height: 1.6;
}

.kanata-ai-title {
    font-family: var(--kas-font-heading, 'Fredoka', sans-serif);
    font-weight: 600;
    font-size: 1.6em;
    color: var(--kas-text, #3D3D3D);
    margin: 0;
    line-height: 1.2;
}

.kanata-ai-card {
    background: var(--kas-surface, #fff);
    border-radius: var(--kas-radius, 12px);
    padding: 24px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(61, 61, 61, 0.08);
    border: 1px solid var(--kas-border, rgba(61, 61, 61, 0.1));
}

.kanata-ai-input {
    width: 100%;
    padding: 10px 14px;
    font-family: var(--kas-font-body, 'Inter', sans-serif);
    font-size: 0.95em;
    color: var(--kas-text, #3D3D3D);
    background: var(--kas-bg-subtle, #FBF7F0);
    border: 2px solid var(--kas-input-border, rgba(61, 61, 61, 0.2));
    border-radius: var(--kas-radius-sm, 8px);
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.kanata-ai-input:focus {
    outline: none;
    border-color: var(--kas-text, #3D3D3D);
    background: var(--kas-surface, #fff);
}

.kanata-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-family: var(--kas-font-heading, 'Fredoka', sans-serif);
    font-size: 1em;
    font-weight: 600;
    border: none;
    border-radius: var(--kas-radius, 12px);
    cursor: pointer;
    transition: all 0.2s;
}

.kanata-ai-btn-primary {
    background: var(--kas-accent, #E23838);
    color: var(--kas-accent-contrast, #fff);
}

.kanata-ai-btn-primary:hover {
    background: var(--kas-accent-hover, #c92e2e);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}