/* Screen theme: palette -> semantic roles -> compatibility aliases.
 * Inspired by Material 3 color roles; brand shades are chosen for this product.
 * Components consume semantic roles, never raw palette colors.
 */
:root {
  --ui-disabled-surface: #f5f5f5;
  --ui-disabled-text: #929292;
  --ui-disabled-outline: #e3e3e3;
  --palette-blue-100: #edf3fa;
  --palette-blue-150: #e3edf9;
  --palette-blue-200: #dce8f6;
  --palette-blue-300: #cbdcf0;
  --palette-blue-400: #bcd0ea;
  --palette-blue-500: #8faacc;
  --palette-blue-700: #244d7a;
  --palette-blue-800: #193b62;
  --palette-blue-900: #173e68;
  --palette-neutral-0: #ffffff;
  --palette-neutral-25: #f4f6f9;
  --palette-neutral-50: #f7f9fc;
  --palette-neutral-100: #edf2f7;
  --palette-neutral-150: #f6f8fc;
  --palette-neutral-200: #e7edf5;
  --palette-neutral-300: #dce4ee;
  --palette-neutral-500: #a5b5ca;
  --palette-neutral-700: #687b92;
  --palette-neutral-900: #24364d;

  --ui-section-divider: var(--ui-field-outline);
  --ui-card-outline: #dce4ee;
  --ui-shortcut-surface: #f8fafd;
  --ui-shortcut-outline: #dce4ee;
  --ui-shortcut-icon-container: #e9f1fb;
  --ui-notice-surface: #fffaf3;
  --ui-notice-outline: #f1dab8;
  --ui-filter-selected: var(--palette-blue-150);
  --ui-navigation-surface: var(--palette-neutral-50);
  --ui-action-surface: var(--palette-blue-100);
  --ui-action-surface-hover: var(--palette-blue-200);
  --ui-primary: var(--palette-blue-700);
  --ui-info-accent: #2f86ff;
  --ui-on-primary: var(--palette-neutral-0);
  --ui-primary-hover: var(--palette-blue-800);
  --ui-primary-container: var(--palette-blue-100);
  --ui-primary-container-hover: var(--palette-blue-200);
  --ui-primary-container-pressed: var(--palette-blue-300);
  --ui-on-primary-container: var(--palette-blue-900);
  --ui-metric-hover: #f5f8fc;
  --ui-metric-pressed: var(--palette-blue-200);
  --ui-shortcut-icon-container-hover: var(--palette-blue-200);
  --ui-table-row-alternate: #fafafa;
  --ui-table-row-hover: #f0f0f0;
  --ui-table-header: var(--ui-navigation-surface);
  --ui-on-table-header: var(--palette-neutral-900);
  --ui-surface: var(--palette-neutral-0);
  --ui-surface-container-low: var(--palette-neutral-50);
  --ui-surface-container: var(--palette-neutral-100);
  --ui-surface-container-high: var(--palette-neutral-200);
  --ui-on-surface: var(--palette-neutral-900);
  --ui-on-surface-variant: var(--palette-neutral-700);
  --ui-outline: var(--palette-neutral-500);
  --ui-field-outline: #d6e2f3;
  --ui-field-outline-hover: var(--palette-blue-400);
  --ui-outline-selected: var(--palette-blue-500);
  --ui-outline-variant: var(--palette-neutral-300);
  --ui-background: var(--palette-neutral-25);

  /* Status colors are separate from brand color and keep their business meaning. */
  --ui-error: #b83333;
  --ui-error-container: #fff4f4;
  --ui-error-container-hover: #ffe8e8;
  --ui-on-error-container: #9c2b32;
  --ui-error-outline: #d9989b;
  --ui-review: #853449;
  --ui-review-container: #f8edf1;
  --ui-warning: #8a600d;
  --ui-warning-container: #fff4d6;
  --ui-warning-outline: #d7b976;
  --ui-success: #25765b;
  --ui-success-container: #e7f5ee;
  --ui-success-outline: #9ac8b5;

  /* Glass and fluid art are theme roles, not business surface colors. */
  --ui-glass-rgb: 244 246 249;
  --ui-glass-surface: rgb(var(--ui-glass-rgb) / 30%);
  --ui-glass-hover: rgb(var(--ui-glass-rgb) / 45%);
  --ui-glass-control: rgb(var(--ui-glass-rgb) / 12%);
  --ui-glass-control-hover: rgb(var(--ui-glass-rgb) / 22%);
  --ui-on-glass: #ffffff;
  --ui-on-ambient: #f0f5fc;
  --ui-on-ambient-muted: #cfdef0;
  --ui-ambient-base: #102d50;
  --ui-ambient-start: #102b4c;
  --ui-ambient-mid: #173b64;
  --ui-ambient-end: #0d2442;
  --ui-shadow-rgb: 32 56 85;
  --ui-shadow-subtle: rgb(var(--ui-shadow-rgb) / 5%);
  --ui-shadow-soft: rgb(var(--ui-shadow-rgb) / 10%);
  --ui-shadow-strong: rgb(var(--ui-shadow-rgb) / 16%);
  --ui-scrim: rgb(var(--ui-shadow-rgb) / 35%);

  /* Compatibility names preserve existing controls while using the same roles. */
  --ui-text: var(--ui-on-surface);
  --ui-muted: var(--ui-on-surface-variant);
  --ui-border: var(--ui-outline-variant);
  --ui-danger: var(--ui-error);
  --ui-option-highlight: var(--ui-primary-container);
  --ui-option-selected-hover: var(--ui-primary-container-hover);
  --accent: var(--ui-primary);
  --action: var(--ui-primary);
  --ink: var(--ui-on-surface);
  --line: var(--ui-outline-variant);
  --muted: var(--ui-on-surface-variant);
}

/* Import preview card categories. */
:root {
  --ui-import-added-surface: var(--ui-success-container);
  --ui-import-added-text: var(--ui-success);
  --ui-import-updated-surface: var(--ui-error-container);
  --ui-import-updated-text: var(--ui-on-error-container);
  --ui-import-unchanged-surface: var(--ui-warning-container);
  --ui-import-unchanged-text: var(--ui-warning);
  --ui-import-all-surface: var(--ui-primary-container);
  --ui-import-all-text: var(--ui-primary);
}