/* =====================================================================
   ENGAGE STAFF PORTAL — THEME
   This is the file to edit when you want the portal to LOOK different.
   Every colour, font, size and spacing used by the pages comes from the
   variables below. Change a value here and the whole site follows.
   See DESIGN.md for a guide to what each one does.
   ===================================================================== */
:root {
  /* ---- Brand colours ------------------------------------------------ */
  --brand:        #0b4f6c;   /* Engage blue: headings, links, buttons, active tab */
  --brand-dark:   #083a50;   /* hover state for the brand colour */
  --brand-soft:   #e6eff3;   /* pale wash behind highlighted boxes */
  --accent:       #e8542f;   /* the orange "E" and small highlights */

  /* ---- Page colours -------------------------------------------------- */
  --bg:           #f6f7f8;   /* page background */
  --panel:        #ffffff;   /* cards, tables, the sidebar */
  --text:         #1c2430;   /* body text */
  --muted:        #66707c;   /* secondary text, captions */
  --line:         #e1e4e8;   /* borders and dividers */
  --ok:           #1a7f4b;   /* success messages */
  --warn:         #b45309;   /* warnings, cost notes */
  --danger:       #b91c1c;   /* remove buttons, errors */

  /* ---- Source colours (same as the Daily Monitor) --------------------- */
  --tv:      #2563eb;
  --radio:   #7c3aed;
  --print:   #0f766e;
  --online:  #b45309;
  --social:  #db2777;

  /* ---- Typography ---------------------------------------------------- */
  --font:         "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-size:    15px;      /* base text size; everything else scales from it */
  --title-size:   26px;      /* page titles */
  --h2-size:      18px;      /* section titles */

  /* ---- Shape and spacing --------------------------------------------- */
  --radius:       8px;       /* corner rounding on cards and buttons */
  --gap:          16px;      /* standard spacing between things */
  --sidebar:      220px;     /* width of the left navigation */
  --content-max:  1100px;    /* widest the main column gets */
}