/* ============================================================
 * ServiceAI Light Theme — overrides Kendo Fluent variables
 * Loaded AFTER fluent-main.css so token overrides win.
 * Source: design handoff bundle "serviceai-v2".
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* Design palette — light */
    --sai-bg: #faf8f5;
    --sai-bg-elev: #ffffff;
    --sai-bg-sidebar: #f4f1eb;
    --sai-bg-header: #ffffff;
    --sai-bg-hover: #efeae0;
    --sai-bg-active: #ece4f8;
    --sai-bg-input: #ffffff;

    --sai-border: #e8e2d6;
    --sai-border-strong: #d4cbb8;
    --sai-border-input: #d4cbb8;

    --sai-fg: #2b2620;
    --sai-fg-muted: #6b6459;
    --sai-fg-dim: #9a9388;
    --sai-fg-label: #8a8376;

    --sai-accent: #8b6bf1;
    --sai-accent-hover: #9d82f5;
    --sai-accent-soft: rgba(139, 107, 241, 0.12);
    --sai-accent-ring: rgba(139, 107, 241, 0.35);

    --sai-link: #4aa3f0;
    --sai-link-hover: #6cb6f3;

    --sai-badge-bg: #ece7db;
    --sai-badge-fg: #6b6459;

    --sai-danger: #e46962;
    --sai-success: #6ec58a;

    --sai-radius-sm: 6px;
    --sai-radius: 8px;
    --sai-radius-lg: 12px;

    /* Map Kendo Fluent CSS variables to the design palette ---- */
    --kendo-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --kendo-font-family-monospace: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    --kendo-font-size: 14px;

    --kendo-color-primary: var(--sai-accent);
    --kendo-color-primary-hover: var(--sai-accent-hover);
    --kendo-color-primary-active: var(--sai-accent-hover);
    --kendo-color-primary-emphasis: var(--sai-accent-hover);
    --kendo-color-primary-subtle: var(--sai-accent-soft);
    --kendo-color-primary-subtle-hover: var(--sai-accent-soft);
    --kendo-color-on-primary: #ffffff;

    --kendo-color-base: var(--sai-bg-elev);
    --kendo-color-base-hover: var(--sai-bg-hover);
    --kendo-color-base-active: var(--sai-bg-active);
    --kendo-color-base-subtle: var(--sai-badge-bg);
    --kendo-color-base-subtle-hover: var(--sai-bg-hover);
    --kendo-color-base-emphasis: var(--sai-border-strong);
    --kendo-color-on-base: var(--sai-fg);

    --kendo-color-app-surface: var(--sai-bg);
    --kendo-color-on-app-surface: var(--sai-fg);
    --kendo-color-surface: var(--sai-bg-elev);
    --kendo-color-surface-alt: var(--sai-bg-elev);

    --kendo-color-subtle: var(--sai-fg-muted);
    --kendo-color-subtle-hover: var(--sai-fg);
    --kendo-color-on-subtle: var(--sai-fg);

    --kendo-color-success: var(--sai-success);
    --kendo-color-on-success: #ffffff;
    --kendo-color-error: var(--sai-danger);
    --kendo-color-on-error: #ffffff;
    --kendo-color-warning: #f0a837;
    --kendo-color-on-warning: #ffffff;
    --kendo-color-info: var(--sai-accent);
    --kendo-color-on-info: #ffffff;

    --kendo-border: var(--sai-border);
    --kendo-component-border: var(--sai-border);
    --kendo-component-bg: var(--sai-bg-elev);
    --kendo-component-text: var(--sai-fg);

    --kendo-body-bg: var(--sai-bg);
    --kendo-body-text: var(--sai-fg);

    --kendo-input-bg: var(--sai-bg-input);
    --kendo-input-text: var(--sai-fg);
    --kendo-input-border: var(--sai-border-input);
    --kendo-input-hover-border: var(--sai-fg-dim);
    --kendo-input-focus-border: var(--sai-accent);

    --kendo-link-text: var(--sai-link);
    --kendo-link-hover-text: var(--sai-link-hover);

    --kendo-hover-bg: var(--sai-bg-hover);
    --kendo-hover-border: var(--sai-border-strong);
    --kendo-selected-bg: var(--sai-accent-soft);
    --kendo-selected-text: var(--sai-fg);

    --kendo-disabled-bg: var(--sai-bg);
    --kendo-disabled-text: var(--sai-fg-dim);
}

html, body {
    background: var(--sai-bg);
    color: var(--sai-fg);
    font-family: var(--kendo-font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.005em;
}

/* App-level surfaces */
.k-appbar-class {
    background-color: var(--sai-bg-header) !important;
    border-bottom: 1px solid var(--sai-border);
    box-shadow: none !important;
}

.k-appbar-class .site-title,
.k-appbar-class .icon-nav,
.k-appbar-class .k-appbar-section a,
.k-appbar-class .k-appbar-section a .site-title,
.k-appbar-class .k-appbar-section a div,
.k-appbar-class .k-appbar-section > * {
    color: var(--sai-fg) !important;
}

.k-appbar-class .k-appbar-section a:hover {
    color: var(--sai-accent) !important;
}

.k-appbar-class .k-svg-icon svg,
.k-appbar-class .k-appbar-section a .k-svg-icon svg {
    color: var(--sai-fg) !important;
}

/* Sidebar surface */
.sidebar {
    background: var(--sai-bg-sidebar);
    border-right: 1px solid var(--sai-border);
}