/*
 * Customer branding — colours
 * ===========================
 * Everything customer-specific lives in this folder (branding.css, branding.js,
 * logo-header.png, logo-login.png, favicon.ico). See README.md for the checklist.
 */
:root {
  /* Header bar */
  --color-topbar:          #072B7B;
  --color-topbar-hover:    #0A3A9E;

  /* Accent: buttons, active states, toggles, links, focus rings */
  --color-primary:         #4F46E5;
  --color-primary-hover:   #4338CA;
  --color-primary-light:   #EEF2FF;
  --color-primary-rgb:     79, 70, 229;   /* same as --color-primary, for shadows/focus rings */

  /* Page background gradient (light mode) */
  --brand-bg-mid:          #EEF2FF;
  --brand-bg-end:          #E0E7FF;

  /* Dark mode */
  --brand-dark-accent:         #cbd5e1;
  --brand-dark-accent-strong:  #94a3b8;
  --brand-dark-surface:        #1e293b;
  --brand-dark-surface-2:      #334155;
}

/* Dark mode: the accent turns into the light tone of the brand's dark palette, text on it is dark. */
html[data-theme="dark"] {
  --color-primary:         var(--brand-dark-accent);
  --color-primary-hover:   #E2E8F0;
  --color-primary-light:   rgba(203, 213, 225, 0.14);
  --color-primary-rgb:     203, 213, 225;
  --on-primary:            #0F172A;
}