/* ============================================================
   Design tokens → Syncfusion material3 theme variables.
   The material3 theme is driven by --color-sf-* custom properties holding
   comma-separated RGB triplets (used as rgba(var(--color-sf-primary), …)),
   plus --e-font-name / --e-radius. Re-pointing them here re-skins every
   Syncfusion component to the design system (Design Library §1/§4) without
   touching the theme file. Loaded last in index.html so these :root values win.
   Source palette: css/app.css :root.
   ============================================================ */
:root {
  /* accent #006580 — actions, focus, links, selection */
  --color-sf-primary: 0, 101, 128;
  --color-sf-primary-container: 230, 239, 242;   /* accent tint #E6EFF2 */
  --color-sf-on-primary: 255, 255, 255;
  --color-sf-on-primary-container: 0, 80, 102;   /* accent hover #005066 */
  --color-sf-surface-tint-color: 0, 101, 128;
  --color-sf-inverse-primary: 0, 147, 184;       /* info bright #0093B8 */

  /* neutrals */
  --color-sf-surface: 255, 255, 255;             /* base */
  --color-sf-surface-variant: 243, 243, 246;     /* surface #F3F3F6 */
  --color-sf-on-surface: 0, 0, 0;                /* ink */
  --color-sf-on-surface-variant: 107, 109, 112;  /* muted text #6B6D70 */
  --color-sf-on-background: 0, 0, 0;
  --color-sf-outline: 146, 148, 151;             /* muted (non-text) #929497 */
  --color-sf-outline-variant: 225, 225, 225;     /* line #E1E1E1 */
  --color-sf-secondary: 107, 109, 112;
  --color-sf-secondary-container: 243, 243, 246;
  --color-sf-on-secondary-container: 84, 86, 90; /* muted on tint #54565A */
  --color-sf-tertiary: 0, 101, 128;
  --color-sf-tertiary-container: 230, 239, 242;

  /* status — container = tint fill, base hue = text/icon (Design Library §22) */
  --color-sf-success: 31, 122, 77;               /* #1F7A4D */
  --color-sf-success-container: 231, 242, 236;   /* #E7F2EC */
  --color-sf-on-success-container: 31, 122, 77;
  --color-sf-warning: 128, 87, 0;                /* #805700 */
  --color-sf-warning-container: 247, 239, 224;   /* #F7EFE0 */
  --color-sf-on-warning-container: 128, 87, 0;
  --color-sf-error: 179, 38, 30;                 /* #B3261E */
  --color-sf-error-container: 247, 231, 230;     /* #F7E7E6 */
  --color-sf-on-error-container: 179, 38, 30;
  --color-sf-info: 0, 101, 128;                  /* info = accent */
  --color-sf-info-container: 230, 239, 242;
  --color-sf-on-info-container: 0, 80, 102;

  /* type — Segoe UI everywhere (Design Library §2) */
  --e-font-name: "Segoe UI", "Inter", system-ui, -apple-system, sans-serif;
}

/* Single 4px radius (Design Library §3). material3's standard components already
   resolve to 4px (calc(1rem * .25)); these pin the floating/pill outliers. */
.e-dialog,
.e-popup.e-popup-open,
.e-dropdownbase,
.e-toast,
.e-card { border-radius: var(--radius); }

/* material3 renders toasts on the dark inverse surface; the design system is
   light-only, so render them as a light floating card: bold status-coloured
   title, message underneath (Design Library §22). Variants via SfToast
   CssClass="toast-error|toast-success|toast-info". */
.e-toast-container .e-toast {
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  padding: var(--space-2) var(--space-3);
}
.e-toast-container .e-toast .e-toast-message .e-toast-title,
.e-toast-container .e-toast .e-toast-message .e-toast-content {
  color: var(--ink);
}
.e-toast-container .e-toast .e-toast-message .e-toast-title {
  font-weight: 600;
}
.e-toast-container .e-toast .e-toast-message .e-toast-content {
  padding-top: var(--space-1);
}
.e-toast-container .e-toast.toast-error .e-toast-title   { color: var(--error); }
.e-toast-container .e-toast.toast-success .e-toast-title { color: var(--success); }
.e-toast-container .e-toast.toast-info .e-toast-title    { color: var(--info); }
.e-toast-container .e-toast .e-toast-close-icon {
  color: var(--muted-text);
}
.e-toast-container .e-toast .e-toast-close-icon:hover,
.e-toast-container .e-toast .e-toast-close-icon:focus {
  color: var(--ink);
  background: var(--surface);
}

/* pace.js loading bar ships Bootstrap blue (#0d6efd in rocker/pace.min.css) */
body .pace .pace-progress { background: var(--accent); }