/* The cloud's colour tokens (DESIGN.md, Colors and Mapping; parity 1.4). DESIGN.md's frontmatter decides every value;
 * this file follows it, and CloudTokenSyncTests holds the two together. Loaded after Radzen's theme; the selector
 * html[data-sb-theme-choice] (0,1,1) is stronger than Radzen's :root (0,1,0) whatever the order. The theme choice is the
 * cookie's (CloudTheme, App.razor); light-dark() takes each value from the element's color-scheme. */

html[data-sb-theme-choice="light"] { color-scheme: light; }
html[data-sb-theme-choice="dark"] { color-scheme: dark; }
html[data-sb-theme-choice="system"] { color-scheme: light dark; }

html[data-sb-theme-choice] {
    --sb-accent: light-dark(#563FAE, #B9A6F7);
    --sb-accent-hover: light-dark(#48339A, #CBBDFA);
    --sb-accent-pressed: light-dark(#402F81, #9C81F4);
    --sb-on-accent: light-dark(#F4F1FA, #17122A);
    --sb-window: light-dark(#E2DFE7, #17151C);
    --sb-panel: light-dark(#EAE7EE, #1D1A23);
    --sb-shell: light-dark(#D8D4DF, #121016);
    --sb-grid-border: light-dark(#CAC4D2, #2B2733);
    --sb-control-surface: light-dark(#F1EFF4, #17151C);
    --sb-control-surface-hover: light-dark(#E1DDE7, #25222D);
    --sb-button-surface: light-dark(#F1EFF4, #302B3A);
    --sb-control-border: light-dark(#7D7291, #796E8D);
    --sb-header-surface: light-dark(#E4E1E9, #211E28);
    --sb-header-text: light-dark(#4E4859, #A39CB0);
    --sb-heading-text: light-dark(#211D27, #E6E1EE);
    --sb-body-text: light-dark(#211D27, #E6E1EE);
    --sb-helper-text: light-dark(#4E4859, #A39CB0);
    --sb-muted-text: light-dark(#5F596A, #9690A2);
    --sb-list-even: light-dark(#DCD8E2, #24212B);
    --sb-selection: light-dark(#D9CFF2, #2D2740);
    --sb-warning-panel: light-dark(#EDE2C9, #2C2419);
    --sb-warning-border: light-dark(#C9AE74, #5E4A28);
    --sb-warning-text: light-dark(#7A5200, #E9B45C);
    --sb-success-panel: light-dark(#D7EBE2, #1B2E25);
    --sb-success-text: light-dark(#2A6E50, #8FC9AE);
    --sb-danger-panel: light-dark(#EBD9D7, #2E1B1D);
    --sb-danger-text: light-dark(#A3332A, #F08A80);
    --sb-info-panel: light-dark(#D8E0EF, #1B2130);
    --sb-info-text: light-dark(#2A509A, #A9C1F2);

    --rz-primary: var(--sb-accent);
    --rz-primary-light: var(--sb-accent);
    --rz-secondary: var(--sb-accent);
    --rz-secondary-light: var(--sb-accent);
    --rz-outline-color: var(--sb-accent);
    --rz-link-color: var(--sb-accent);
    --rz-form-field-label-focus-color: var(--sb-accent);
    --rz-primary-dark: var(--sb-accent-hover);
    --rz-secondary-dark: var(--sb-accent-hover);
    --rz-link-hover-color: var(--sb-accent-hover);
    --rz-primary-darker: var(--sb-accent-pressed);
    --rz-secondary-darker: var(--sb-accent-pressed);
    --rz-on-primary: var(--sb-on-accent);
    --rz-on-primary-dark: var(--sb-on-accent);
    --rz-on-primary-darker: var(--sb-on-accent);
    --rz-on-secondary: var(--sb-on-accent);
    --rz-on-secondary-dark: var(--sb-on-accent);
    --rz-on-secondary-darker: var(--sb-on-accent);
    --rz-body-background-color: var(--sb-window);
    --rz-splitter-bar-background-color: var(--sb-window);
    --rz-base-background-color: var(--sb-panel);
    --rz-dialog-background-color: var(--sb-panel);
    --rz-card-background-color: var(--sb-panel);
    --rz-on-danger: var(--sb-panel);
    --rz-on-success: var(--sb-panel);
    --rz-on-info: var(--sb-panel);
    --rz-sidebar-background-color: var(--sb-shell);
    --rz-header-background-color: var(--sb-shell);
    --rz-panel-menu-item-background-color: var(--sb-shell);
    --rz-panel-menu-item-2nd-level-background-color: var(--sb-shell);
    --rz-base-300: var(--sb-grid-border);
    --rz-border-normal: var(--rz-border-width) solid var(--sb-grid-border);
    --rz-panel-menu-item-border: var(--rz-border-width) solid var(--sb-grid-border);
    --rz-input-background-color: var(--sb-control-surface);
    --rz-input-focus-background-color: var(--sb-control-surface);
    --rz-input-hover-background-color: var(--sb-control-surface-hover);
    --rz-grid-hover-background-color: var(--sb-control-surface-hover);
    --rz-panel-menu-item-hover-background-color: var(--sb-control-surface-hover);
    --rz-panel-menu-item-2nd-level-hover-background-color: var(--sb-control-surface-hover);
    --rz-base-200: var(--sb-button-surface);
    --rz-base-700: var(--sb-button-surface);
    --rz-base: var(--sb-button-surface);
    --rz-input-border: var(--rz-border-width) solid var(--sb-control-border);
    --rz-input-hover-border: var(--rz-border-width) solid var(--sb-control-border);
    --rz-base-400: var(--sb-control-border);
    --rz-input-border-block-end: var(--rz-border-width) solid var(--sb-control-border);
    --rz-grid-header-background-color: var(--sb-header-surface);
    --rz-grid-foot-background-color: var(--sb-header-surface);
    --rz-grid-header-color: var(--sb-header-text);
    --rz-text-title-color: var(--sb-heading-text);
    --rz-tabs-tab-selected-color: var(--sb-heading-text);
    --rz-text-color: var(--sb-body-text);
    --rz-sidebar-color: var(--sb-body-text);
    --rz-header-color: var(--sb-body-text);
    --rz-panel-menu-item-color: var(--sb-body-text);
    --rz-grid-selected-color: var(--sb-body-text);
    --rz-on-base: var(--sb-body-text);
    --rz-on-base-light: var(--sb-body-text);
    --rz-on-primary-lighter: var(--sb-body-text);
    --rz-on-secondary-lighter: var(--sb-body-text);
    --rz-panel-menu-item-active-color: var(--sb-body-text);
    --rz-panel-menu-item-hover-color: var(--sb-body-text);
    --rz-text-contrast-color: var(--sb-body-text);
    --rz-on-warning: var(--sb-body-text);
    --rz-text-secondary-color: var(--sb-helper-text);
    --rz-form-field-label-color: var(--sb-helper-text);
    --rz-tabs-tab-color: var(--sb-helper-text);
    --rz-text-tertiary-color: var(--sb-muted-text);
    --rz-input-placeholder-color: var(--sb-muted-text);
    --rz-text-disabled-color: var(--sb-muted-text);
    --rz-grid-stripe-background-color: var(--sb-list-even);
    --rz-grid-selected-background-color: var(--sb-selection);
    --rz-primary-lighter: var(--sb-selection);
    --rz-secondary-lighter: var(--sb-selection);
    --rz-panel-menu-item-active-background-color: var(--sb-selection);
    --rz-panel-menu-item-2nd-level-active-background-color: var(--sb-selection);
    --rz-warning-lighter: var(--sb-warning-panel);
    --rz-warning: var(--sb-warning-border);
    --rz-warning-darker: var(--sb-warning-text);
    --rz-on-warning-lighter: var(--sb-warning-text);
    --rz-success-lighter: var(--sb-success-panel);
    --rz-success: var(--sb-success-text);
    --rz-success-darker: var(--sb-success-text);
    --rz-on-success-lighter: var(--sb-success-text);
    --rz-danger-lighter: var(--sb-danger-panel);
    --rz-danger: var(--sb-danger-text);
    --rz-danger-dark: var(--sb-danger-text);
    --rz-danger-darker: var(--sb-danger-text);
    --rz-on-danger-lighter: var(--sb-danger-text);
    --rz-info-lighter: var(--sb-info-panel);
    --rz-info: var(--sb-info-text);
    --rz-info-darker: var(--sb-info-text);
    --rz-on-info-lighter: var(--sb-info-text);

    --rz-text-font-family: Inter, sans-serif;
}

@font-face { font-family: Inter; src: url("../fonts/Inter-Regular.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url("../fonts/Inter-SemiBold.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: Inter; src: url("../fonts/Inter-Bold.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; }