/* Warm Sand: warm paper and clay inspired by https://www.anthropic.com/.
 * Our own light/dark semantic palette, not an official Anthropic theme.
 * Kumo 2.13.2 semantic overrides. Keep terminal data-theme scopes independent.
 * Render-blocking in the head; startup.js sets the palette before body paint.
 */
:root[data-palette='warm-sand'] {
    --palette-base: #faf9f5;
    --palette-mantle: #f0eee6;
    --palette-crust: #e8e6dc;
    --palette-text: #3d3d3a;
    --palette-subtext: #5e5d59;
    --palette-muted: #6e6c66;
    --palette-surface0: #d1cfc5;
    --palette-surface1: #c1beb4;
    --palette-surface2: #b0aea5;
    --palette-accent: #9d4b34;
    --palette-blue: #416b86;
    --palette-red: #a13e38;
    --palette-green: #526c42;
    --palette-yellow: #80601f;
    --palette-peach: #d97757;
    --palette-teal: #3b6d66;
    --palette-solid-brand: #87412e;
    --palette-solid-danger: #8d3732;
    --palette-status-text-mix: 0%;
    --palette-indicator-mix: 0%;
    --palette-accent-text-mix: 0%;
    --palette-inverted: #faf9f5;
    --palette-badge-mix: 15%;
}
:root[data-palette='warm-sand'][data-mode='dark'] {
    --palette-base: #262624;
    --palette-mantle: #20201f;
    --palette-crust: #191918;
    --palette-text: #f0eee6;
    --palette-subtext: #d1cfc5;
    --palette-muted: #aeaca4;
    --palette-surface0: #3a3a36;
    --palette-surface1: #4b4b45;
    --palette-surface2: #636259;
    --palette-accent: #dfa184;
    --palette-blue: #8fb5cc;
    --palette-red: #e8a49c;
    --palette-green: #adc39a;
    --palette-yellow: #d7ba7d;
    --palette-peach: #d97757;
    --palette-teal: #98c1b7;
    /* Kumo emphasis buttons use white text in both modes. */
    --palette-solid-brand: #87412e;
    --palette-solid-danger: #8d3732;
    --palette-status-text-mix: 0%;
    --palette-indicator-mix: 0%;
    --palette-accent-text-mix: 0%;
    --palette-inverted: #262624;
    --palette-badge-mix: 48%;
}
/* Olive: warm cream surfaces and muted olive, paired with warm charcoal. */
:root[data-palette='olive'] {
    --palette-base: #faf8f0;
    --palette-mantle: #f1f0e6;
    --palette-crust: #f7f7ed;
    --palette-text: #30372a;
    --palette-subtext: #5f6454;
    --palette-muted: #6b6f5e;
    --palette-surface0: #d7d8c8;
    --palette-surface1: #bdc1ac;
    --palette-surface2: #858c73;
    --palette-accent: #56623b;
    --palette-blue: #496a81;
    --palette-red: #a0463e;
    --palette-green: #556b3e;
    --palette-yellow: #806420;
    --palette-peach: #b78560;
    --palette-teal: #496e61;
    --palette-solid-brand: #3e4c29;
    --palette-solid-danger: #8d3732;
    --palette-inverted: #faf8f0;
    --palette-status-text-mix: 0%;
    --palette-indicator-mix: 0%;
    --palette-accent-text-mix: 0%;
    --palette-badge-mix: 15%;
}
:root[data-palette='olive'][data-mode='dark'] {
    --palette-base: #252820;
    --palette-mantle: #20231c;
    --palette-crust: #1b1e18;
    --palette-text: #eeefe3;
    --palette-subtext: #c8ccba;
    --palette-muted: #adb49b;
    --palette-surface0: #3a4030;
    --palette-surface1: #505941;
    --palette-surface2: #788368;
    --palette-accent: #bbc998;
    --palette-blue: #a2b9cb;
    --palette-red: #e7a69c;
    --palette-green: #b6c995;
    --palette-yellow: #d4bc84;
    --palette-peach: #b78560;
    --palette-teal: #9cbcaf;
    --palette-solid-brand: #3e4c29;
    --palette-solid-danger: #8d3732;
    --palette-inverted: #252820;
    --palette-status-text-mix: 0%;
    --palette-indicator-mix: 0%;
    --palette-accent-text-mix: 0%;
    --palette-badge-mix: 48%;
}
:root:is([data-palette='warm-sand'], [data-palette='olive'])[data-mode] {
    --text-color-kumo-default: var(--palette-text);
    --text-color-kumo-strong: var(--palette-text);
    --text-color-kumo-subtle: var(--palette-subtext);
    --text-color-kumo-placeholder: var(--palette-subtext);
    --text-color-kumo-inactive: var(--palette-muted);
    --text-color-kumo-inverse: var(--palette-inverted);
    --text-color-kumo-brand: color-mix(
        in srgb,
        var(--palette-accent),
        black var(--palette-accent-text-mix)
    );
    --text-color-kumo-link: var(--text-color-kumo-brand);
    --text-color-kumo-info: color-mix(
        in srgb,
        var(--palette-blue),
        black var(--palette-status-text-mix)
    );
    --text-color-kumo-danger: color-mix(
        in srgb,
        var(--palette-red),
        black var(--palette-status-text-mix)
    );
    --text-color-kumo-success: color-mix(
        in srgb,
        var(--palette-green),
        black var(--palette-status-text-mix)
    );
    --text-color-kumo-warning: color-mix(
        in srgb,
        var(--palette-yellow),
        black var(--palette-status-text-mix)
    );
    --color-kumo-canvas: var(--palette-crust);
    --color-kumo-elevated: var(--palette-mantle);
    --color-kumo-recessed: var(--palette-crust);
    --color-kumo-base: var(--palette-base);
    --color-kumo-control: var(--palette-base);
    --color-kumo-overlay: var(--palette-base);
    --color-kumo-tint: color-mix(
        in srgb,
        var(--palette-base),
        var(--palette-surface0) 40%
    );
    --color-kumo-contrast: var(--palette-text);
    --color-kumo-interact: var(--palette-surface2);
    --color-kumo-fill: var(--palette-surface0);
    --color-kumo-fill-hover: color-mix(
        in srgb,
        var(--palette-base),
        var(--palette-surface0) 65%
    );
    --color-kumo-brand: var(--palette-solid-brand);
    --color-kumo-brand-hover: color-mix(
        in srgb,
        var(--palette-solid-brand),
        black 15%
    );
    --color-kumo-line: var(--palette-surface1);
    --color-kumo-hairline: var(--palette-surface0);
    --color-kumo-focus: var(--palette-accent);
    --color-kumo-arrow-edge: var(--palette-surface1);
    --color-kumo-arrow-stroke: var(--palette-surface1);
    --color-kumo-shadow-edge: color-mix(
        in srgb,
        var(--palette-text) 12%,
        transparent
    );
    --color-kumo-shadow-drop: rgb(0 0 0 / 16%);
    --color-kumo-info: color-mix(
        in srgb,
        var(--palette-blue),
        black var(--palette-indicator-mix)
    );
    --color-kumo-success: color-mix(
        in srgb,
        var(--palette-green),
        black var(--palette-indicator-mix)
    );
    --color-kumo-warning: color-mix(
        in srgb,
        var(--palette-yellow),
        black var(--palette-indicator-mix)
    );
    --color-kumo-danger: var(--palette-solid-danger);
    --color-kumo-info-tint: color-mix(
        in srgb,
        var(--palette-base),
        var(--palette-blue) 10%
    );
    --color-kumo-success-tint: color-mix(
        in srgb,
        var(--palette-base),
        var(--palette-green) 10%
    );
    --color-kumo-warning-tint: color-mix(
        in srgb,
        var(--palette-base),
        var(--palette-yellow) 10%
    );
    --color-kumo-danger-tint: color-mix(
        in srgb,
        var(--palette-base),
        var(--palette-red) 10%
    );
    --color-kumo-banner-info: var(--color-kumo-info-tint);
    --color-kumo-banner-warning: var(--color-kumo-warning-tint);
    --color-kumo-badge-red: color-mix(
        in srgb,
        var(--palette-red),
        black var(--palette-badge-mix)
    );
    --color-kumo-badge-green: color-mix(
        in srgb,
        var(--palette-green),
        black var(--palette-badge-mix)
    );
    --color-kumo-badge-orange: var(--palette-peach);
    --color-kumo-badge-purple: color-mix(
        in srgb,
        var(--palette-accent),
        black var(--palette-badge-mix)
    );
    --color-kumo-badge-teal: color-mix(
        in srgb,
        var(--palette-teal),
        black var(--palette-badge-mix)
    );
    --color-kumo-badge-blue: color-mix(
        in srgb,
        var(--palette-blue),
        black var(--palette-badge-mix)
    );
    --color-kumo-badge-neutral: color-mix(
        in srgb,
        var(--palette-subtext),
        black var(--palette-badge-mix)
    );
    --color-kumo-badge-inverted: var(--palette-text);
    --text-color-kumo-badge-inverted: var(--palette-inverted);
    --text-color-kumo-badge-orange-subtle: var(--text-color-kumo-warning);
    --text-color-kumo-badge-teal-subtle: color-mix(
        in srgb,
        var(--palette-teal),
        black var(--palette-status-text-mix)
    );
    --text-color-kumo-badge-neutral-subtle: var(--palette-text);
}
/* Keep ordinary Kumo selection and hover surfaces neutral and quiet.
 * Brand, status, text and focus tokens retain their installed Kumo values.
 * Terminal windows and swatches define their own local semantic tokens.
 */
:root[data-palette='kumo'][data-mode='light'] {
    --color-kumo-tint: oklch(97.5% 0 0);
    --color-kumo-fill-hover: oklch(97% 0 0);
}
:root[data-palette='kumo'][data-mode='dark'] {
    --color-kumo-tint: oklch(25.5% 0 0);
    --color-kumo-fill-hover: oklch(34.5% 0 0);
}
/* Warm Sand keeps its paper, clay and emphasis colors. Blend only ordinary
 * borders and neutral selection/hover surfaces slightly toward the base.
 */
:root[data-palette='warm-sand'][data-mode] {
    --color-kumo-line: color-mix(
        in srgb,
        var(--palette-surface1),
        var(--palette-base) 10%
    );
    --color-kumo-tint: color-mix(
        in srgb,
        var(--palette-base),
        var(--palette-surface0) 32%
    );
    --color-kumo-fill-hover: color-mix(
        in srgb,
        var(--palette-base),
        var(--palette-surface0) 55%
    );
}
/* Preserve Kumo 2.13.2's gradient overlay, inset highlight, ring, hover,
 * active, disabled and focus structure. Dark solid tokens keep white text
 * readable while these component-local mixes retain visible depth.
 * LinkButton shares the same layers. Terminal component scopes stay independent.
 */
:root:is([data-palette='warm-sand'], [data-palette='olive'])
    :is([data-kumo-component='Button'], [data-kumo-component='LinkButton']):not(
        .incudal-terminal-window *,
        .incudal-terminal-palette-swatch *
    ) {
    --kumo-button-emphasis-bg: color-mix(
        in oklch,
        var(--kumo-button-emphasis-gradient-end),
        white 20%
    ) !important;
    --kumo-button-emphasis-gradient-start: color-mix(
        in oklch,
        var(--kumo-button-emphasis-gradient-end),
        white 12%
    ) !important;
}
/* Kumo controls use the solid brand token for their keyboard focus rings.
 * Match the installed focus utility as well as emphasis buttons; keep ring
 * geometry and use the readable accent, especially on dark surfaces. */
:root:is([data-palette='warm-sand'], [data-palette='olive'])
    :is(
        [data-kumo-component='Button'],
        [data-kumo-component='LinkButton'],
        [class~='focus-visible:ring-kumo-brand']
    ):focus-visible:not(
        .incudal-terminal-window *,
        .incudal-terminal-palette-swatch *
    ) {
    --tw-ring-color: var(--color-kumo-focus) !important;
}
/* Overflow tabs draw the focus ring on their inner span, not the button. */
:root:is([data-palette='warm-sand'], [data-palette='olive'])
    [data-kumo-component='Tabs'][data-kumo-part='overflow-control']:focus-visible:not(
        .incudal-terminal-window *,
        .incudal-terminal-palette-swatch *
    )
    > span {
    --tw-ring-color: var(--color-kumo-focus) !important;
}
/* CommandPalette search applies its ring to the focused input's container. */
:root:is([data-palette='warm-sand'], [data-palette='olive'])
    [class~='focus-within:ring-kumo-brand']:focus-within:not(
        .incudal-terminal-window *,
        .incudal-terminal-palette-swatch *
    ) {
    --tw-ring-color: var(--color-kumo-focus) !important;
}