/*
 * KnowboundAI brand consistency layer.
 * Loaded after page styles so public pages and product previews share one
 * authoritative blue, logo treatment and shape scale.
 */

:root {
    --brand-blue: #0052D4;
    --brand-blue-hover: #0041A8;
    --brand-blue-rgb: 0, 82, 212;
    --brand-ink: #161F2E;
    --brand-blue-highlight: color-mix(in srgb, var(--brand-blue) 62%, #FFFFFF);
    --radius-control: 10px;
    --radius-card: 20px;
    --radius-panel: 24px;
    --radius-pill: 999px;
}

/* Page-local names remain available, but now resolve to the brand palette. */
.functions-page {
    --fx-blue: var(--brand-blue);
    --fx-cyan: var(--brand-blue-highlight);
}

.solutions-page {
    --solutions-blue: var(--brand-blue);
    --solutions-blue-soft: color-mix(in srgb, var(--brand-blue) 8%, #FFFFFF);
}

.security-page {
    --security-blue: var(--brand-blue);
    --security-blue-bright: var(--brand-blue-highlight);
}

.about-page {
    --about-blue: var(--brand-blue);
    --about-blue-bright: var(--brand-blue-highlight);
}

/* The logo never inherits a page-specific accent or theme-specific blue. */
.logo-link,
.hero-brand,
.field-final-brand {
    font-family: var(--font-logo);
    font-weight: 800;
    letter-spacing: -.04em;
}

.logo-link .logo-eye,
.logo-link .accent-text,
.hero-brand .logo-eye,
.hero-brand .accent-text,
.field-final-brand .logo-eye,
.field-final-brand .accent-text {
    color: var(--brand-blue);
}

/* Shared product-page hero: one hue, with contrast-safe tints of that hue. */
.page-hero,
.solutions-hero {
    background:
        radial-gradient(circle at 75% 24%, rgba(var(--brand-blue-rgb), .24), transparent 28%),
        radial-gradient(circle at 22% 86%, rgba(var(--brand-blue-rgb), .13), transparent 30%),
        linear-gradient(145deg, #07101F 0%, #090D16 52%, #05070B 100%);
}

.page-hero::after,
.solutions-hero::after {
    border-color: rgba(var(--brand-blue-rgb), .16);
    box-shadow: 0 0 0 90px rgba(var(--brand-blue-rgb), .025), 0 0 0 180px rgba(var(--brand-blue-rgb), .018);
}

.page-hero-kicker,
.solutions-kicker {
    color: var(--brand-blue-highlight);
}

.page-hero-kicker i,
.solutions-kicker i {
    background: var(--brand-blue);
    box-shadow: 10px 0 20px rgba(var(--brand-blue-rgb), .55);
}

.page-hero h1 span,
.solutions-hero h1 span {
    background: linear-gradient(105deg, var(--brand-blue-highlight), color-mix(in srgb, var(--brand-blue) 44%, #FFFFFF));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.page-hero-actions .btn,
.solutions-hero-actions .btn,
.security-cta-actions .btn,
.pilot-actions .btn {
    border-radius: var(--radius-control);
    box-shadow: 0 16px 45px rgba(var(--brand-blue-rgb), .24);
}

.page-hero-link:hover,
.solutions-text-link:hover,
.page-hero-proof i,
.solutions-hero-proof i {
    border-color: var(--brand-blue-highlight);
    color: var(--brand-blue-highlight);
}

.page-hero-glow i,
.solutions-hero-glow i {
    background: var(--brand-blue);
}

.page-hero-glow i:nth-child(1),
.solutions-hero-glow i:nth-child(1) {
    box-shadow: 0 0 30px 14px rgba(var(--brand-blue-rgb), .28);
}

/* Start-page narrative and default product previews use the same brand accent. */
.section.problem-section {
    --field-blue: var(--brand-blue-highlight);
    --field-blue-rgb: 76, 134, 227;
}

.kb-chat-demo,
.kb-chat-demo--light {
    --kb-accent: var(--brand-blue);
    --kb-accent-strong: var(--brand-blue-hover);
}

.pilot-chat-app {
    --pilot-app-accent: var(--brand-blue);
}

.kb-admin-logo > span,
.console-brand b,
.kb-admin-panel > header small,
.kb-card-heading small,
.kb-card-heading b,
.kb-admin-caption strong {
    color: var(--brand-blue);
}

.kb-chat-wordmark,
.kb-app-wordmark,
.pilot-app-wordmark,
.workflow-brand,
.console-brand,
.kb-admin-logo {
    font-family: var(--font-logo);
    font-weight: 800;
    letter-spacing: -.04em;
}

.kb-admin-sidebar nav button:hover,
.kb-admin-sidebar nav button.is-active {
    border-left-color: var(--brand-blue);
}

.admin-user > span,
.admin-form-footer button,
.question-bubble,
.ask-submit,
[data-theme="dark"] .question-bubble {
    background: var(--brand-blue);
}

.admin-breadcrumb b,
.admin-form-head small,
.admin-field-title > i,
.ask-form-shell .pilot-mode-switch .mode-spark {
    color: var(--brand-blue);
}

.comparison-bridge span,
.system-core > span {
    background: linear-gradient(145deg, var(--brand-blue), var(--brand-blue-highlight));
    box-shadow: 0 10px 27px rgba(var(--brand-blue-rgb), .24);
}

.ask-form-shell .pilot-mode-switch .pilot-mode-lens {
    border-color: rgba(var(--brand-blue-rgb), .24);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .025)),
        color-mix(in srgb, var(--brand-blue) 24%, #0F172A);
}

.ask-privacy > input:checked + span {
    border-color: var(--brand-blue);
    background: var(--brand-blue);
}

.ask-submit {
    box-shadow: 0 11px 26px rgba(var(--brand-blue-rgb), .22);
}

.ask-submit:hover:not(:disabled) {
    background: var(--brand-blue-hover);
}

.page-progress-bar,
[data-theme="dark"] .page-progress-bar {
    background: linear-gradient(90deg, var(--brand-blue-hover), var(--brand-blue), var(--brand-blue-highlight));
    box-shadow: 0 1px 8px rgba(var(--brand-blue-rgb), .42), 0 0 14px rgba(var(--brand-blue-rgb), .24);
}

/* Feature-story and solution-demo accents are KnowboundAI blue as well. */
.hero-primary,
.workflow-brand > span,
.bot-avatar,
.workflow-model-selector > span {
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-highlight));
}

.setup-skill > button,
.bot-publish-card > button,
.workflow-user-bubble,
.workflow-chat-entry button:last-child {
    background: var(--brand-blue);
}

.setup-source > span,
.bot-publish-card > div b {
    color: var(--brand-blue);
}

.group-access-section {
    background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, var(--brand-blue) 8%), var(--surface));
}

.group-access-section::before {
    background: rgba(var(--brand-blue-rgb), .1);
}

@keyframes workflow-publish {
    45% { background: var(--brand-blue-hover); transform: scale(.97); }
    100% { background: var(--brand-blue); transform: none; }
}

.solutions-page .kb-demo {
    --demo-accent: var(--brand-blue) !important;
}

.solutions-page :is(
    .kb-admin-sidebar > div > i,
    .kb-admin-list-view header button,
    .kb-policy-summary button,
    .kb-admin-profile > span
) {
    background-color: var(--brand-blue);
}

.solutions-page :is(
    .kb-admin-list-view header small,
    .kb-admin-editor-view header > small,
    .kb-bot-grid article > span,
    .kb-bot-grid footer b,
    .kb-admin-editor-view header button,
    .kb-policy-stack article > span,
    .kb-policy-stack article small
) {
    color: var(--brand-blue);
}

/* Remove legacy dark-mode blue overrides from shared start-page components. */
[data-theme="dark"] :is(
    .workflow-step.is-active .workflow-icon-box,
    .workflow-step.is-active:hover .workflow-content,
    .solution-tab-btn:hover,
    .solution-tab-btn.is-active
) {
    border-color: var(--brand-blue);
}

[data-theme="dark"] :is(
    .workflow-step.is-active .workflow-number,
    .solution-tab-btn.is-active .tab-icon,
    .solution-tab-btn.is-active .tab-progress-ring,
    .user-avatar
) {
    background-color: var(--brand-blue);
}

[data-theme="dark"] :is(.portrait-border-gradient, .portrait-glow) {
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-highlight));
}

/* Consistent public controls and container hierarchy. */
.btn,
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea,
.ask-field select,
.ask-field input,
.ask-field textarea,
.ask-submit {
    border-radius: var(--radius-control);
}

.ask-field select:focus,
.ask-field input:focus,
.ask-field textarea:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(var(--brand-blue-rgb), .12);
}

.pilot-question-box,
.direct-contact-box,
.comparison-side,
.question-card,
.solutions-cta-card,
.deployment-console {
    border-radius: var(--radius-card);
}

.pilot-card-container,
.pilot-application-shell,
.ask-form-shell,
.local-promise-card {
    border-radius: var(--radius-panel);
}

.pilot-card-container::before {
    background: var(--brand-blue);
}

@media (prefers-contrast: more) {
    .page-hero-kicker,
    .solutions-kicker,
    .page-hero-proof i,
    .solutions-hero-proof i {
        color: #FFFFFF;
    }
}