/*
 * Slate-mist design tokens, from boards G (day) and H (night) in docs/superpowers/design.
 * Loaded after the Kendo theme sheet. Theming/DesignTokens.cs holds the same table and
 * DesignTokenContrastTests holds the two equal, so change both together.
 *
 * Colour roles: blue = action; green = state (selection, active navigation, current row,
 * active tab, sort indicator); red = alerts only, never a row fill; neutrals are slate-mist.
 */

/* Day (board G) */
:root {
    --aoc-page: #F9FBFD;
    --aoc-surface: #FFFFFF;
    --aoc-panel: #EEF2F6;
    --aoc-raised: #EAEFF4;

    --aoc-border-hairline: #DAE1E9;
    --aoc-border-control: #CDD6E0;
    --aoc-border-row: #E8EDF2;

    --aoc-text-primary: #1E242B;
    --aoc-text-secondary: #38414B;
    --aoc-text-muted: #525C67;
    /* Board G #6A7480 is 4.22:1 on the panel; darkened along its hue to reach AA.
       Faint is valid ONLY on page, surface and panel. On raised, badge-bg or
       state-selected-bg it fails AA (4.20-4.49:1); use --aoc-text-muted there. */
    --aoc-text-faint: #656F7B;

    --aoc-icon: #93A0AE;

    --aoc-action-primary: #2C6DB5;
    --aoc-action-primary-text: #FFFFFF;
    --aoc-action-link: #1D4E80;
    --aoc-action-link-hover: #153A61;
    --aoc-action-tint: #E8F0F9;

    --aoc-state-selected-bg: #DCEDE3;
    --aoc-state-selected-fg: #16543C;
    --aoc-state-accent: #20734E;
    --aoc-state-badge-fg: #FFFFFF;
    --aoc-state-positive-fg: #1A6044;
    --aoc-state-positive-bg: #E3EFE8;

    --aoc-warn-bg: #FBEFD3;
    --aoc-warn-fg: #856100;

    --aoc-alert-bg: #FAE1D8;
    --aoc-alert-bg-subtle: #FCEDE8;
    --aoc-alert-fg: #A8382A;
    --aoc-alert-border: #F0D5CB;
    --aoc-alert-badge-fg: #FFFFFF;

    --aoc-info-bg: #D9EAF0;
    --aoc-info-fg: #1F5C6E;

    --aoc-violet-bg: #EFE6EE;
    --aoc-violet-fg: #6A4468;

    --aoc-badge-bg: #E5EAF0;

    /* The pressed day/night segment (L24): white by day, one step above the surface by night. */
    --aoc-segment-on-bg: #FFFFFF;
    --aoc-segment-on-border: #DAE1E9;

    /* The drag ghost's shadow (board G L21); not a colour role. */
    --aoc-shadow-drag: 0 6px 14px rgba(20, 32, 48, 0.22);

    /* Density: board G is comfortable. */
    --aoc-row-height: 40px;
    --aoc-control-height: 32px;
}

/* Night (board H) */
html[data-theme="dark"] {
    --aoc-page: #10161D;
    --aoc-surface: #161E27;
    --aoc-panel: #19212B;
    --aoc-raised: #202A36;

    --aoc-border-hairline: #2E3A48;
    --aoc-border-control: #36434F;
    --aoc-border-row: #232D3A;

    --aoc-text-primary: #E8EEF5;
    --aoc-text-secondary: #C3CDD8;
    --aoc-text-muted: #A7B3C0;
    --aoc-text-faint: #8B97A4;

    --aoc-icon: #6C7A88;

    --aoc-action-primary: #2C6DB5;
    --aoc-action-primary-text: #FFFFFF;
    --aoc-action-link: #7FB4EC;
    --aoc-action-link-hover: #A5CDF5;
    --aoc-action-tint: #152534;

    --aoc-state-selected-bg: #17362A;
    --aoc-state-selected-fg: #8FDCB2;
    --aoc-state-accent: #57C08A;
    --aoc-state-badge-fg: #0E1F17;
    --aoc-state-positive-fg: #7FD6A6;
    --aoc-state-positive-bg: #16332A;

    --aoc-warn-bg: #372D16;
    --aoc-warn-fg: #E0BA6B;

    --aoc-alert-bg: #38201D;
    --aoc-alert-bg-subtle: #2E1C1A;
    --aoc-alert-fg: #F08A7E;
    --aoc-alert-border: #4A2A26;
    --aoc-alert-badge-fg: #2A1210;

    --aoc-info-bg: #12303A;
    --aoc-info-fg: #6FC4D8;

    --aoc-violet-bg: #2C2034;
    --aoc-violet-fg: #C49BCE;

    --aoc-badge-bg: #26303D;

    --aoc-segment-on-bg: #202A36;
    --aoc-segment-on-border: #47535F;

    --aoc-shadow-drag: 0 6px 14px rgba(0, 0, 0, 0.55);

    /* Kendo's text on its success and error fills, by night (ruling R3). The fills are light
       by night, so white on them fails AA (2.26:1, 2.43:1); board H's badge text is dark
       (7.59:1, 7.25:1). DesignTokens.KendoNightMap holds the same pairs. */
    --kendo-color-on-success: var(--aoc-state-badge-fg);
    --kendo-color-on-error: var(--aoc-alert-badge-fg);
}

/*
 * Kendo Default theme base tokens, pointed at the product tokens. Only base tokens are set:
 * the theme derives hover, active, subtle and emphasis shades from them live (by night too, in
 * theme 14.5.0).
 * By night the primary shades are also stated, computed, by /theme/brand.css (BrandStylesheet).
 * surface-alt is set too: derived, it would put inputs and cards on an off-white the boards
 * do not have.
 */
:root {
    --kendo-color-app-surface: var(--aoc-page);
    --kendo-color-on-app-surface: var(--aoc-text-primary);
    --kendo-color-surface: var(--aoc-panel);
    --kendo-color-surface-alt: var(--aoc-surface);
    --kendo-color-base: var(--aoc-raised);
    --kendo-color-on-base: var(--aoc-text-primary);
    --kendo-color-border: var(--aoc-border-hairline);
    --kendo-color-border-alt: var(--aoc-border-control);
    --kendo-color-subtle: var(--aoc-text-muted);
    --kendo-color-primary: var(--aoc-action-primary);
    --kendo-color-on-primary: var(--aoc-action-primary-text);
    --kendo-color-success: var(--aoc-state-accent);
    --kendo-color-error: var(--aoc-alert-fg);
    --kendo-color-warning: var(--aoc-warn-fg);
    --kendo-color-info: var(--aoc-info-fg);

    /* Type: the boards set body text at 13 px and secondary text at 12 px. Kendo sizes its
       components from --kendo-font-size (14 px by default) and its "md" size from
       --kendo-font-size-md, so both follow the body; -sm is Kendo's 12 px already and is
       stated so the pair is explicit. DesignTokens.BodyFontPx / SecondaryFontPx match. */
    --kendo-font-size: 0.8125rem;
    --kendo-font-size-md: 0.8125rem;
    --kendo-font-size-sm: 0.75rem;
}

/*
 * The default (base) button's border is the control border (board G L91 #CDD6E0, board H
 * #36434F), not the hairline Kendo's base button shares with every surface. Kendo's base-button
 * rules (rest, hover, active) read --kendo-color-border, so it is restated on buttons only: other
 * borders keep the hairline, and Kendo's rules keep their order against primary, selected and flat
 * buttons. DesignTokens.KendoButtonMap holds the same pair.
 */
.k-button {
    --kendo-color-border: var(--aoc-border-control);
}

body {
    margin: 0;
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: var(--kendo-font-size);
    color: var(--aoc-text-primary);
    background: var(--aoc-page);
    -webkit-font-smoothing: antialiased;
}

/* Compact density: rows 40 -> 32 px, controls 32 -> 28 px. */
html[data-density="compact"] {
    --aoc-row-height: 32px;
    --aoc-control-height: 28px;
}

/*
 * Kendo 14.5.0 has no component-height variables (sizes come from --kendo-spacing-* and the
 * font's line height), so the heights are set here on Kendo's default-size controls, and on
 * product classes for the shell's own markup. The height carries the size and vertical padding
 * is dropped, so compact can go below Kendo's natural 30 px control.
 *
 * Default size (visual check V1): Kendo UI for jQuery 2026.3.811 renders a default-size control
 * with no size class at all ("k-button k-button-primary", "k-datepicker k-input",
 * "k-picker k-dropdownlist"); only an explicit size adds one (k-button-sm, k-input-lg, and
 * k-button-md for an explicit medium). So the rules select the control by its base class and
 * leave out the other sizes, which covers the default and the explicit medium alike. The MVC
 * HTML helpers emit a bare element and pass the size, if any, to the widget; the widget adds the
 * classes. KendoRenderedClasses (tests) records what it renders.
 *
 * Scope (ruling R3):
 * - Buttons embedded in an input (a picker's arrow, a numeric spinner) take the input's height.
 * - The small buttons Kendo builds into composite widgets keep Kendo's own sizes: calendar
 *   navigation and title, a window's title-bar actions (k-button-xs), the pager. Forcing them to
 *   the control height would make 32 px squares of Kendo's compact icon buttons.
 * - A textarea and a multiselect grow with their content, so neither the height nor the inner
 *   padding applies to them.
 */
/* Its own rule: a browser without complex :not() drops only this one, not the inputs'. */
.k-button:not(.k-button-xs, .k-button-sm, .k-button-lg, .k-input-button, .k-spinner-increase, .k-spinner-decrease, .k-calendar *, .k-window-titlebar *, .k-pager *) {
    block-size: var(--aoc-control-height);
    padding-block: 0;
}

.k-input:not(.k-input-sm):not(.k-input-lg):not(.k-textarea):not(.k-multiselect),
.k-picker:not(.k-picker-sm):not(.k-picker-lg) {
    block-size: var(--aoc-control-height);
    padding-block: 0;
}

.k-button.k-icon-button:not(.k-button-xs, .k-button-sm, .k-button-lg, .k-input-button, .k-spinner-increase, .k-spinner-decrease, .k-calendar *, .k-window-titlebar *, .k-pager *) {
    inline-size: var(--aoc-control-height);
}

.k-input:not(.k-input-sm):not(.k-input-lg):not(.k-textarea):not(.k-multiselect) .k-input-inner,
.k-picker:not(.k-picker-sm):not(.k-picker-lg) .k-input-inner {
    padding-block: 0;
}

/* Grid rows: the row height is a minimum, so wrapped or edited cells still grow. The cells keep
   a small block padding (4 px, which fits a 13 px line in a compact 32 px row), so a cell that
   wraps to two lines does not touch the row borders. */
.k-grid .k-table-tbody .k-table-row {
    height: var(--aoc-row-height);
}

.k-grid .k-table-tbody .k-table-row > .k-table-td {
    padding-block: var(--kendo-spacing-1);
}

.aoc-row {
    min-block-size: var(--aoc-row-height);
}

.aoc-control {
    block-size: var(--aoc-control-height);
}