/* Design tokens: every color and font the app uses. Change the look here, not in component CSS.
   The bar color and accent are overridden at runtime by the school's branding (see branding.js). */
:root {
   color-scheme: light;

   /* Surfaces */
   --bg: #f1f3f6;
   --surface: #ffffff;
   --surface-2: #f6f8fa;
   --line: #d9dee5;
   --photo-bg: #ffffff; /* behind product photos, so white-background shots blend in */

   /* Text */
   --fg: #18212c;
   --muted: #5d6a79;

   /* Top bar (set from the school's bar color) */
   --bar: #1c2b45;
   --bar-fg: #eef2f8;
   --brand: #f2b134; /* default logo mark */

   /* Accent: buttons, tabs, focus (derived from the bar color) */
   --accent: #2f55d4;
   --accent-soft: #e6ecfc;
   --on-accent: #ffffff;

   /* Status */
   --ok: #18803f;
   --ok-soft: #e3f4e9;
   --warn: #a15800;
   --warn-soft: #fcf0da;
   --bad: #b3261e;
   --bad-soft: #fbe5e3;
   --live: #4cd07d; /* realtime connected dot */

   /* Ticket priority, calm to alarming: pastel fill, deep same-hue text (≥5.6:1 on its fill),
      and a stronger mark for borders and the chosen chip's ring. Low is dark green, Urgent is bright red. */
   --prio-low-bg: #dcefe2;
   --prio-low-fg: #1b5a33;
   --prio-low-mark: #1f7a43;
   --prio-normal-bg: #eef2c9;
   --prio-normal-fg: #4f5a0a;
   --prio-normal-mark: #6f7f0e;
   --prio-high-bg: #fee3c6;
   --prio-high-fg: #8a3a05;
   --prio-high-mark: #c25a0c;
   --prio-urgent-bg: #ffdcdc;
   --prio-urgent-fg: #b0101e;
   --prio-urgent-mark: #e5172c;
   --idle: #6b7a90;

   /* Overlays */
   --scrim: rgba(20, 28, 40, 0.45);
   --shadow-modal: 0 20px 50px rgba(0, 0, 0, 0.25);

   /* Type (fonts are loaded in index.html) */
   --font-display:
      "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif; /* headings, matching bhsec.bard.edu */
   --font-body: "Open Sans", Helvetica, Arial, sans-serif; /* body text, matching bhsec.bard.edu */
   --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}