/**
 * ECI Fluent UI color tokens — aligned with docs/ECI-Fluent-UI-Colors.md
 * Shared by Razor views and React ClientApp. Load before Bootstrap to allow Bootstrap defaults, then this file redefines :root (import/link order: tokens after bootstrap in React; same for Razor).
 */

:root,
[data-bs-theme="light"] {
  /* --- Semantic (alerts, validation) --- */
  --success: #3db838;
  --warning: #eaa300;
  --error: #dc3545;
  --info: #6c757d;
  --highlight-bg: #ffdf5f;

  /* --- Presence --- */
  --presence-available: #3db838;
  --presence-away: #eaa300;
  --presence-busy: #dc3545;
  --presence-dnd: #dc3545;
  --presence-offline: #6c757d;
  --presence-oof: #a065be;
  --presence-unknown: #dc3545;

  /* --- Neutrals --- */
  --eci-white: #fff;
  --eci-black: #434143;
  --eci-gray: #a1a1a1;
  --eci-lightgray: #ddd;
  --eci-darkgray: #686868;

  /* --- Red --- */
  --eci-red: #f5333f;
  --eci-lightred: #fe5c66;
  --eci-brightred: #ffa0a6;
  --eci-darkred: #a71b28;
  --eci-red-rgb: 245, 51, 63;
  --eci-lightred-rgb: 254, 92, 102;
  --eci-brightred-rgb: 255, 160, 166;
  --eci-darkred-rgb: 167, 27, 40;

  /* --- Yellow --- */
  --eci-yellow: #f49f00;
  --eci-lightyellow: #f9bb2c;
  --eci-brightyellow: #ffdf5f;
  --eci-darkyellow: #d57602;
  --eci-yellow-rgb: 244, 159, 0;
  --eci-lightyellow-rgb: 249, 187, 44;
  --eci-brightyellow-rgb: 255, 223, 95;
  --eci-darkyellow-rgb: 213, 118, 2;

  /* --- Green --- */
  --eci-green: #48a100;
  --eci-lightgreen: #73cd2a;
  --eci-brightgreen: #aaf36f;
  --eci-darkgreen: #347500;
  --eci-green-rgb: 72, 161, 0;
  --eci-lightgreen-rgb: 115, 205, 42;
  --eci-brightgreen-rgb: 170, 243, 111;
  --eci-darkgreen-rgb: 52, 117, 0;

  /* --- Teal --- */
  --eci-teal: #18a899;
  --eci-lightteal: #3fc6a5;
  --eci-brightteal: #7bf6d8;
  --eci-darkteal: #007468;
  --eci-teal-rgb: 24, 168, 153;
  --eci-lightteal-rgb: 63, 198, 165;
  --eci-brightteal-rgb: 123, 246, 216;
  --eci-darkteal-rgb: 0, 116, 104;

  /* --- Blue --- */
  --eci-blue: #5388e1;
  --eci-lightblue: #5fa3f0;
  --eci-brightblue: #9eceff;
  --eci-darkblue: #3f63b2;
  --eci-blue-rgb: 83, 136, 225;
  --eci-lightblue-rgb: 95, 163, 240;
  --eci-brightblue-rgb: 158, 206, 255;
  --eci-darkblue-rgb: 63, 99, 178;

  /* --- Purple --- */
  --eci-purple: #a065be;
  --eci-lightpurple: #b587de;
  --eci-brightpurple: #d6b5f4;
  --eci-darkpurple: #6f4692;
  --eci-purple-rgb: 160, 101, 190;
  --eci-lightpurple-rgb: 181, 135, 222;
  --eci-brightpurple-rgb: 214, 181, 244;
  --eci-darkpurple-rgb: 111, 70, 146;

  /* Semantic RGB (for rgba) */
  --success-rgb: 61, 184, 56;
  --warning-rgb: 234, 163, 0;
  --error-rgb: 220, 53, 69;
  --info-rgb: 108, 117, 125;

  /* Badge-safe contrast text (darker than base --eci-dark* to meet AA 4.5:1 on bright fills) */
  --badge-success-text: #2b5f00;  /* 5.74:1 on --eci-brightgreen */
  --badge-warning-text: #6b3a00;  /* 7.17:1 on --eci-brightyellow */

  /* Legacy Dispatch Portal names → ECI Fluent */
  --eci-red-hover: var(--eci-lightred);
  --eci-dark-gray: var(--eci-black);
  --eci-medium-gray: var(--eci-gray);
  --eci-light-gray: var(--eci-lightgray);

  /* --- Bootstrap 5.3 bridge (light) --- */
  --bs-blue: var(--eci-blue);
  --bs-teal: var(--eci-teal);
  --bs-purple: var(--eci-purple);
  --bs-purple-rgb: var(--eci-purple-rgb);

  --bs-primary: var(--eci-red);
  --bs-primary-rgb: var(--eci-red-rgb);
  --bs-primary-text-emphasis: #621a1e;
  --bs-primary-bg-subtle: #fde8ea;
  --bs-primary-border-subtle: #f0aeb2;

  --bs-secondary: var(--eci-darkgray);
  --bs-secondary-rgb: 104, 104, 104;

  --bs-success: var(--success);
  --bs-success-rgb: var(--success-rgb);
  --bs-success-text-emphasis: var(--eci-darkgreen);
  --bs-success-bg-subtle: #e6f4e4;
  --bs-success-border-subtle: #b8e0b0;

  --bs-info: var(--info);
  --bs-info-rgb: var(--info-rgb);
  --bs-info-text-emphasis: #3d4449;
  --bs-info-bg-subtle: #e8eaed;
  --bs-info-border-subtle: #c4c9ce;

  --bs-warning: var(--warning);
  --bs-warning-rgb: var(--warning-rgb);
  --bs-warning-text-emphasis: var(--eci-darkyellow);
  --bs-warning-bg-subtle: #fff6db;
  --bs-warning-border-subtle: #f5d77a;

  --bs-danger: var(--error);
  --bs-danger-rgb: var(--error-rgb);
  --bs-danger-text-emphasis: #842029;
  --bs-danger-bg-subtle: #fcebec;
  --bs-danger-border-subtle: #f1aeb5;

  --bs-red: var(--error);
  --bs-green: var(--success);
  --bs-yellow: var(--warning);
  --bs-cyan: var(--eci-lightblue);

  --bs-body-color: var(--eci-black);
  --bs-body-color-rgb: 67, 65, 67;
  --bs-border-color: var(--eci-lightgray);
  --bs-heading-color: var(--eci-black);

  --bs-secondary-color: rgba(67, 65, 67, 0.75);
  --bs-secondary-color-rgb: 67, 65, 67;
  --bs-tertiary-color: rgba(67, 65, 67, 0.5);
  --bs-tertiary-color-rgb: 67, 65, 67;

  --bs-link-color: #c42d36;
  --bs-link-hover-color: var(--eci-red);
  --bs-link-color-rgb: 196, 45, 54;
  --bs-link-hover-color-rgb: 245, 51, 63;

  --bs-focus-ring-color: rgba(var(--eci-red-rgb), 0.25);

  --bs-highlight-bg: var(--highlight-bg);

  --bs-font-sans-serif: Calibri, "Calibri Light", Arial, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
}

[data-bs-theme="dark"] {
  --eci-red-hover: var(--eci-lightred);

  --bs-primary: #f5333f;
  --bs-primary-rgb: 245, 51, 63;
  --bs-primary-text-emphasis: #ff8a93;
  --bs-primary-bg-subtle: #3d1518;
  --bs-primary-border-subtle: #84262c;

  --bs-secondary: #9ca3af;
  --bs-secondary-rgb: 156, 163, 175;

  --bs-success: var(--success);
  --bs-success-rgb: var(--success-rgb);
  --bs-success-text-emphasis: #aaf36f;
  --bs-success-bg-subtle: #1a2e18;
  --bs-success-border-subtle: #347500;

  --bs-info: var(--info);
  --bs-info-rgb: var(--info-rgb);
  --bs-info-text-emphasis: #ced4da;
  --bs-info-bg-subtle: #2b3035;
  --bs-info-border-subtle: #495057;

  --bs-warning: var(--warning);
  --bs-warning-rgb: var(--warning-rgb);
  --bs-warning-text-emphasis: #ffdf5f;
  --bs-warning-bg-subtle: #3d3200;
  --bs-warning-border-subtle: #d57602;

  --bs-danger: var(--error);
  --bs-danger-rgb: var(--error-rgb);
  --bs-danger-text-emphasis: #f5b0b8;
  --bs-danger-bg-subtle: #3d1518;
  --bs-danger-border-subtle: #a71b28;

  --bs-body-color: #e9ecef;
  --bs-body-color-rgb: 233, 236, 239;
  --bs-border-color: #495057;
  --bs-heading-color: #fff;

  --bs-secondary-color: rgba(233, 236, 239, 0.75);
  --bs-secondary-color-rgb: 233, 236, 239;
  --bs-tertiary-color: rgba(233, 236, 239, 0.5);
  --bs-tertiary-color-rgb: 233, 236, 239;

  --bs-link-color: #ff8a93;
  --bs-link-hover-color: #ffc9cd;
  --bs-link-color-rgb: 255, 138, 147;
  --bs-link-hover-color-rgb: 255, 201, 205;

  --bs-focus-ring-color: rgba(245, 51, 63, 0.45);
}

/* WCAG AA: Bootstrap success/warning badges default to white on saturated fills (fails for small text).
   ECI pattern: bright fill + dark text. Scoped to .badge / .tech-initials so toasts
   (.bg-success + .text-white) stay unchanged.
   --badge-success-text / --badge-warning-text are darker than --eci-dark* to guarantee AA 4.5:1. */
.badge.bg-success,
.tech-initials.bg-success {
  background-color: var(--eci-brightgreen) !important;
  color: var(--badge-success-text) !important;
}

.badge.bg-warning,
.tech-initials.bg-warning {
  background-color: var(--eci-brightyellow) !important;
  color: var(--badge-warning-text) !important;
}