/* ============================================================
   Kendo swatch — Microsoft Fluent 2 "Teams Light"
   ------------------------------------------------------------
   A drop-in :root variable overlay that retunes the Kendo /
   Telerik UI for Blazor Default theme to Microsoft's Fluent 2
   Teams light palette. Layer it on top of
   `kendo-theme-default/all.css` — no component-structural CSS
   is emitted, so the swatch is safe to enable/disable at
   runtime (e.g. by toggling <link disabled>) without reflow.

   Follows Telerik's own swatch pattern (compare with
   `kendo-theme-default/swatches/default-ocean-blue.css`).

   Source palette: Fluent 2 Web — Light (Teams variant)
   https://fluent2.microsoft.design/color
   https://react.fluentui.dev/?path=/docs/theme-colors--docs

   Fluent token → Kendo token mapping is semantic:
     colorNeutralBackground1        → --kendo-color-surface       (#FFFFFF)
     colorNeutralBackground2        → --kendo-color-surface-alt   (#FAFAFA)
     colorNeutralBackground3        → --kendo-color-app-surface   (#F5F5F5)
     colorNeutralBackgroundCanvas   → body background             (#F5F5F5)
     colorBrandBackground           → --kendo-color-primary       (#5B5FC7)
     colorBrandForeground1          → --kendo-color-primary-hover (#4F52B2)
   ============================================================ */

:root {
    color-scheme: light;

    /* ── Surfaces (Fluent 2 neutral ramp, light) ──────────────── */
    /* Canvas — subtle grey background; keeps elevated surfaces   */
    /* visually distinct without relying on shadow.               */
    --kendo-color-app-surface:    #f5f5f5;
    --kendo-color-on-app-surface: #242424;
    /* Secondary neutral — muted text, placeholders.              */
    --kendo-color-subtle:         #616161;
    /* Surface — raised components (cards, drawer, app bar).      */
    --kendo-color-surface:        #ffffff;
    /* Surface alt — hover rows, tabs, secondary panels.          */
    --kendo-color-surface-alt:    #fafafa;
    --kendo-color-on-surface:     #242424;
    --kendo-color-on-surface-alt: #242424;

    /* ── Borders ──────────────────────────────────────────────── */
    /* colorNeutralStroke1 / stroke2 (light).                     */
    --kendo-color-border:     rgba(0, 0, 0, 0.09);
    --kendo-color-border-alt: rgba(0, 0, 0, 0.20);

    /* ── Base (inputs, secondary buttons, neutral panels) ────── */
    --kendo-color-base:               #f0f0f0;
    --kendo-color-base-hover:         #e6e6e6;
    --kendo-color-base-active:        #d6d6d6;
    --kendo-color-base-subtle:        #fafafa;
    --kendo-color-base-subtle-hover:  #f0f0f0;
    --kendo-color-base-subtle-active: #e6e6e6;
    --kendo-color-base-emphasis:      #b8b8b8;
    --kendo-color-base-on-subtle:     #242424;
    --kendo-color-on-base:            #242424;
    --kendo-color-base-on-surface:    #242424;

    /* ── Primary (Fluent 2 brand ramp — Teams) ────────────────── */
    /* Light theme uses the mid-tone brand for sufficient contrast */
    /* against the #FFFFFF surface; hover/active darken.          */
    --kendo-color-primary:               #5b5fc7;
    --kendo-color-primary-hover:         #4f52b2;
    --kendo-color-primary-active:        #464775;
    --kendo-color-primary-subtle:        #e8ebfa;
    --kendo-color-primary-subtle-hover:  #dcdff4;
    --kendo-color-primary-subtle-active: #ccd0ed;
    --kendo-color-primary-emphasis:      #7f85f5;
    --kendo-color-primary-on-subtle:     #464775;
    --kendo-color-on-primary:            #ffffff;
    --kendo-color-primary-on-surface:    #4f52b2;

    /* ── Secondary (neutral pill buttons) ─────────────────────── */
    --kendo-color-secondary:               #e6e6e6;
    --kendo-color-secondary-hover:         #d6d6d6;
    --kendo-color-secondary-active:        #c4c4c4;
    --kendo-color-secondary-subtle:        #fafafa;
    --kendo-color-secondary-subtle-hover:  #f0f0f0;
    --kendo-color-secondary-subtle-active: #e6e6e6;
    --kendo-color-secondary-emphasis:      #9e9e9e;
    --kendo-color-secondary-on-subtle:     #242424;
    --kendo-color-on-secondary:            #242424;
    --kendo-color-secondary-on-surface:    #424242;

    /* ── Info (Fluent communication blue, light) ─────────────── */
    --kendo-color-info:               #0f6cbd;
    --kendo-color-info-hover:         #115ea3;
    --kendo-color-info-active:        #0c3b5e;
    --kendo-color-info-subtle:        #ebf3fc;
    --kendo-color-info-subtle-hover:  #cfe4fa;
    --kendo-color-info-subtle-active: #b4d3ef;
    --kendo-color-info-emphasis:      #479ef5;
    --kendo-color-info-on-subtle:     #0c3b5e;
    --kendo-color-on-info:            #ffffff;
    --kendo-color-info-on-surface:    #115ea3;

    /* ── Success (Fluent green, light) ────────────────────────── */
    --kendo-color-success:               #107c10;
    --kendo-color-success-hover:         #0e700e;
    --kendo-color-success-active:        #0b5a08;
    --kendo-color-success-subtle:        #e7f3e7;
    --kendo-color-success-subtle-hover:  #caead0;
    --kendo-color-success-subtle-active: #9fd89f;
    --kendo-color-success-emphasis:      #13a10e;
    --kendo-color-success-on-subtle:     #0b5a08;
    --kendo-color-on-success:            #ffffff;
    --kendo-color-success-on-surface:    #0e700e;

    /* ── Warning (Fluent yellow/amber, light) ─────────────────── */
    --kendo-color-warning:               #f7630c;
    --kendo-color-warning-hover:         #ca5010;
    --kendo-color-warning-active:        #8a3707;
    --kendo-color-warning-subtle:        #fdf1ea;
    --kendo-color-warning-subtle-hover:  #f9d9ce;
    --kendo-color-warning-subtle-active: #f4bfa7;
    --kendo-color-warning-emphasis:      #fa9a68;
    --kendo-color-warning-on-subtle:     #8a3707;
    --kendo-color-on-warning:            #ffffff;
    --kendo-color-warning-on-surface:    #ca5010;

    /* ── Error (Fluent red, light) ────────────────────────────── */
    --kendo-color-error:               #c50f1f;
    --kendo-color-error-hover:         #b10e1c;
    --kendo-color-error-active:        #750b13;
    --kendo-color-error-subtle:        #fdf3f4;
    --kendo-color-error-subtle-hover:  #fccfd2;
    --kendo-color-error-subtle-active: #eeacb2;
    --kendo-color-error-emphasis:      #e37d80;
    --kendo-color-error-on-subtle:     #750b13;
    --kendo-color-on-error:            #ffffff;
    --kendo-color-error-on-surface:    #b10e1c;

    /* ── Elevations (Fluent light shadow ramp) ────────────────── */
    --kendo-elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
    --kendo-elevation-2: 0 2px 4px 0 rgba(0, 0, 0, 0.10);
    --kendo-elevation-3: 0 4px 8px 0 rgba(0, 0, 0, 0.12);
    --kendo-elevation-4: 0 8px 16px 0 rgba(0, 0, 0, 0.14);

    /* ── AppBar (Telerik-specific — not derived from surface) ── */
    --kendo-appbar-bg:     #ffffff;
    --kendo-appbar-text:   #242424;
    --kendo-appbar-border: rgba(0, 0, 0, 0.09);
}

/* Body takes the Teams canvas so non-Telerik content matches. */
body {
    background-color: #f5f5f5;
    color: #242424;
}

/* Force Teams surface on the AppBar; Default theme's light AppBar rule
   already paints white but explicit is safer against cascade ordering. */
.k-appbar {
    background-color: #ffffff !important;
    color: #242424 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.09) !important;
    /* Kendo Default adds elevation-4 drop shadow. Fluent 2 / Teams uses a flat
       divider instead, so we suppress the shadow and rely on the border above. */
    box-shadow: none !important;
}