/* Shared visual values only. Component styles remain in their owning stylesheet. */
:root {
  --ui-canvas: #f5f6f8;
  --ui-surface: #ffffff;
  --ui-soft: #f8f9fb;
  --ui-ink: #253041;
  --ui-muted: #5f6b7b;
  --ui-line: #e3e7ed;
  --ui-input-line: #cbd3df;
  --ui-red: #c51d2b;
  --ui-red-hover: #a61624;
  --ui-red-soft: #fff0f2;
  --ui-success: #286747;
  --ui-success-soft: #edf7f1;
  --ui-warning: #835b19;
  --ui-warning-soft: #fff7e8;
  --ui-info: #365c81;
  --ui-info-soft: #eef4fb;
  --ui-radius-control: 12px;
  --ui-radius-card: 20px;
  --ui-radius-small: 14px;
  --ui-shadow: 0 4px 20px rgb(30 45 65 / 4%);
  --ui-shadow-hover: 0 8px 24px rgb(30 45 65 / 8%);
  --ui-shadow-dialog: 0 24px 72px rgb(22 35 55 / 18%);
  --ui-focus: #b51c2b;
  --ui-space-1: 8px;
  --ui-space-2: 16px;
  --ui-space-3: 24px;
  --ui-space-4: 32px;
}