/* 0) Scope to Bootstrap's Boehringer theme if you want isolation
   (Optional: use :root if you want it global across all themes) */
[data-bs-theme] {
    /* 1) Core Kendo palette mapped to Bootstrap theme tokens */
    --kendo-color-primary: var(--bs-primary); /* #00E47C */
    --kendo-color-secondary: var(--bs-secondary); /* #08312A */
    --kendo-color-success: var(--bs-success); /* #28a745 */
    --kendo-color-info: var(--bs-info); /* #17a2b8 */
    --kendo-color-warning: var(--bs-warning); /* #ffc107 */
    --kendo-color-danger: var(--bs-danger); /* #dc3545 */
    /* 2) Surface / text roles */
    --kendo-surface: var(--bs-body-bg, #fff); /* #F6F5F3 */
    --kendo-on-surface: var(--bs-body-color, #212529); /* #08312A */
    /* 3) Borders / radius */
    --kendo-outline: var(--bs-border-color, #E5E3DE);
    --kendo-divider: var(--bs-border-color, #E5E3DE);
    --kendo-border-radius: var(--bs-border-radius, 0.375rem);
    /* 4) Links & interactive on surfaces:
     You asked to map var(--kendo-color-primary-on-surface, #0d6efd)
     → use Bootstrap's link color + hover */
    --kendo-color-primary-on-surface: var(--bs-link-color, var(--bs-primary)); /* #00E47C */
    --kendo-color-primary-on-surface-hover: var(--bs-link-hover-color, #00c96d);
    /* 5) Subtle variants (chips/badges/selected states), with color-mix first */
    --kendo-color-primary-subtle: color-mix(in oklab, var(--bs-primary) 15%, var(--kendo-surface) 85%);
    --kendo-color-secondary-subtle: color-mix(in oklab, var(--bs-secondary) 12%, var(--kendo-surface) 88%);
    --kendo-color-success-subtle: color-mix(in oklab, var(--bs-success) 15%, var(--kendo-surface) 85%);
    --kendo-color-info-subtle: color-mix(in oklab, var(--bs-info) 15%, var(--kendo-surface) 85%);
    --kendo-color-warning-subtle: color-mix(in oklab, var(--bs-warning) 20%, var(--kendo-surface) 80%);
    --kendo-color-danger-subtle: color-mix(in oklab, var(--bs-danger) 15%, var(--kendo-surface) 85%);
    /* Foregrounds on subtle backgrounds (ensure contrast) */
    --kendo-color-on-primary-subtle: color-mix(in oklab, var(--bs-primary) 75%, black 25%);
    --kendo-color-on-secondary-subtle: color-mix(in oklab, var(--bs-secondary) 75%, black 25%);
    --kendo-color-on-success-subtle: color-mix(in oklab, var(--bs-success) 75%, black 25%);
    --kendo-color-on-info-subtle: color-mix(in oklab, var(--bs-info) 75%, black 25%);
    --kendo-color-on-warning-subtle: color-mix(in oklab, var(--bs-warning) 70%, black 30%);
    --kendo-color-on-danger-subtle: color-mix(in oklab, var(--bs-danger) 75%, black 25%);
    /* 6) Focus / overlays */
    --kendo-focus-ring: var(--bs-primary, #00E47C);
    --kendo-hover-overlay: color-mix(in oklab, var(--bs-primary) 8%, transparent 92%);
    --kendo-selected-overlay: color-mix(in oklab, var(--bs-primary) 16%, transparent 84%);
}

/* 7) Fallbacks when color-mix() is not supported */
@supports not (color: color-mix(in oklab, black 50%, white 50%)) {
    [data-bs-theme] {
        /* Using your Boehringer palette */
        --kendo-color-primary-subtle: #d9f9ea; /* soft tint of #00E47C */
        --kendo-color-on-primary-subtle: #006b45;
        --kendo-color-secondary-subtle: #e6eceb; /* soft tint of #08312A */
        --kendo-color-on-secondary-subtle: #08312A;
        --kendo-color-success-subtle: #e6f4ea; /* soft tint of #28a745 */
        --kendo-color-on-success-subtle: #1f7a34;
        --kendo-color-info-subtle: #e3f4f7; /* soft tint of #17a2b8 */
        --kendo-color-on-info-subtle: #126b79;
        --kendo-color-warning-subtle: #fff5d6; /* soft tint of #ffc107 */
        --kendo-color-on-warning-subtle: #8a6f00;
        --kendo-color-danger-subtle: #fde7ea; /* soft tint of #dc3545 */
        --kendo-color-on-danger-subtle: #8f1f29;
        /* Overlays & focus fallbacks */
        --kendo-hover-overlay: rgba(0, 228, 124, 0.08);
        --kendo-selected-overlay: rgba(0, 228, 124, 0.16);
    }
}

/* 8) Hook Kendo components to the tokens (common ones) */
[data-bs-theme] .k-window-titlebar {
    background-color: var(--kendo-color-primary); /* Bootstrap primary or fallback */
    color: #fff;
    height: 40px;
}

[data-bs-theme] .k-upload-dropzone {
    /*background-color: var(--kendo-color-secondary-subtle);*/
    border-radius: 10px; /*var(--kendo-border-radius:);*/
}

[data-bs-theme] .k-link, [data-bs-theme] a {
    color: var(--kendo-color-primary-on-surface);
}

    [data-bs-theme] .k-link:hover,
    [data-bs-theme] a:hover {
        color: var(--kendo-color-primary-on-surface-hover);
    }

[data-bs-theme] .k-button {
    --kendo-button-bg: var(--kendo-color-primary);
    --kendo-button-color: #fff; /* good contrast on #00E47C */
    --kendo-button-border: var(--kendo-color-primary);
    border-radius: var(--kendo-border-radius);
}

    [data-bs-theme] .k-button.k-secondary {
        --kendo-button-bg: var(--kendo-surface);
        --kendo-button-color: var(--kendo-color-primary);
        --kendo-button-border: var(--kendo-outline);
    }

[data-bs-theme] .k-input,
[data-bs-theme] .k-textbox,
[data-bs-theme] .k-select {
    --kendo-input-bg: var(--kendo-surface);
    --kendo-input-color: var(--kendo-on-surface);
    --kendo-input-border: var(--kendo-outline);
    --kendo-input-placeholder: color-mix(in oklab, var(--kendo-on-surface) 60%, white 40%);
    --kendo-input-focus-ring: var(--kendo-focus-ring);
    border-radius: var(--kendo-border-radius);
}

[data-bs-theme] .k-card,
[data-bs-theme] .k-grid {
    --kendo-card-bg: var(--kendo-surface);
    --kendo-card-color: var(--kendo-on-surface);
    --kendo-card-border: var(--kendo-divider);
    border-radius: var(--kendo-border-radius);
}

/* 9) Optional dark mode via prefers-color-scheme (if you plan to support it) */
@media (prefers-color-scheme: dark) {
    [data-bs-theme] {
        /* If you don’t have a corporate dark palette, these are conservative shifts */
        --kendo-surface: #0f1412;
        --kendo-on-surface: #e7ece9;
        --kendo-outline: #2a3732;
        --kendo-divider: #1c2421;
        /* Keep link color legible on dark surfaces */
        --kendo-color-primary-on-surface: #5af0a9; /* lighter link on dark */
        --kendo-color-primary-on-surface-hover: #44e297;
    }
}