/* Shared palette approved from the base-setup preview. Color only: no layout or workflow rules. */
:root {
  --ui-primary: #286970;
  --ui-primary-rgb: 40, 105, 112;
  --ui-primary-hover: #20575d;
  --ui-primary-hover-rgb: 32, 87, 93;
  --ui-primary-soft: #eaf4f5;
  --ui-primary-soft-rgb: 234, 244, 245;
  --ui-primary-soft-hover: #dfedef;
  --ui-primary-soft-hover-rgb: 223, 237, 239;
  --ui-primary-border: #b7d1d5;
  --ui-primary-border-rgb: 183, 209, 213;
  --ui-bg: #f5f7fa;
  --ui-bg-rgb: 245, 247, 250;
  --ui-surface: #ffffff;
  --ui-surface-rgb: 255, 255, 255;
  --ui-surface-soft: #f8fafc;
  --ui-surface-soft-rgb: 248, 250, 252;
  --ui-surface-muted: #eef2f6;
  --ui-surface-muted-rgb: 238, 242, 246;
  --ui-text: #202833;
  --ui-text-rgb: 32, 40, 51;
  --ui-text-secondary: #526176;
  --ui-text-secondary-rgb: 82, 97, 118;
  --ui-muted: #65758b;
  --ui-muted-rgb: 101, 117, 139;
  --ui-border: #dce3eb;
  --ui-border-rgb: 220, 227, 235;
  --ui-border-strong: #bac8d5;
  --ui-border-strong-rgb: 186, 200, 213;
  --ui-disabled-text: #7b8798;
  --ui-disabled-text-rgb: 123, 135, 152;
  --ui-blue: #318bff;
  --ui-blue-rgb: 49, 139, 255;
  --ui-focus: #287ad5;
  --ui-focus-rgb: 40, 122, 213;
  --ui-info-text: #1e6694;
  --ui-info-text-rgb: 30, 102, 148;
  --ui-info-soft: #eff7ff;
  --ui-info-soft-rgb: 239, 247, 255;
  --ui-info-border: #bfd7ed;
  --ui-info-border-rgb: 191, 215, 237;
  --ui-danger: #b3423c;
  --ui-danger-rgb: 179, 66, 60;
  --ui-danger-soft: #fff2f0;
  --ui-danger-soft-rgb: 255, 242, 240;
  --ui-danger-border: #e8bab5;
  --ui-danger-border-rgb: 232, 186, 181;
  --ui-warning: #925b08;
  --ui-warning-rgb: 146, 91, 8;
  --ui-warning-soft: #fff3db;
  --ui-warning-soft-rgb: 255, 243, 219;
  --ui-warning-border: #e5cc95;
  --ui-warning-border-rgb: 229, 204, 149;
  --ui-success: #287354;
  --ui-success-rgb: 40, 115, 84;
  --ui-success-soft: #edf7f1;
  --ui-success-soft-rgb: 237, 247, 241;
  --ui-success-border: #bbd8c8;
  --ui-success-border-rgb: 187, 216, 200;

  /* Existing component APIs resolve to the same palette. */
  --color-primary: var(--ui-primary);
  --color-primary-hover: var(--ui-primary-hover);
  --color-secondary: var(--ui-primary);
  --color-accent: var(--ui-info-text);
  --color-bg: var(--ui-bg);
  --color-surface: var(--ui-surface);
  --color-text: var(--ui-text);
  --color-muted: var(--ui-muted);
  --color-text-muted: var(--ui-muted);
  --color-border: var(--ui-border);
  --color-danger: var(--ui-danger);
  --color-warning: var(--ui-warning);
  --color-success: var(--ui-success);
  --color-focus: rgba(var(--ui-focus-rgb), 0.22);
  --color-table-head: var(--ui-surface-soft);
  --bg: var(--ui-bg);
  --panel: var(--ui-surface);
  --panel-strong: var(--ui-surface);
  --line: var(--ui-border);
  --line-strong: var(--ui-border-strong);
  --text: var(--ui-text);
  --ink: var(--ui-text);
  --muted: var(--ui-muted);
  --brand: var(--ui-primary);
  --brand-dark: var(--ui-primary-hover);
  --brand-soft: var(--ui-primary-soft);
  --accent: var(--ui-info-text);
  --accent-soft: var(--ui-info-soft);
  --danger: var(--ui-danger);
}

body { background: var(--ui-bg); color: var(--ui-text); }
.image2-logo {
  background: radial-gradient(circle at center, #fff 0 18%, transparent 19%), var(--ui-primary);
  box-shadow: none;
}
.ui-navbar-mark { background: var(--ui-primary); color: #fff; }
:where(input, select, textarea, button, a, summary):focus-visible {
  outline-color: var(--ui-focus);
}
input:focus, select:focus, textarea:focus, .ui-input:focus {
  border-color: var(--ui-focus);
  outline-color: rgba(var(--ui-focus-rgb), 0.24);
}