/*
 * 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:          #1E1B4B;
  --color-topbar-hover:    #312E81;

  /* 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:         #a5b4fc;
  --brand-dark-accent-strong:  #818cf8;
  --brand-dark-surface:        #1e1b4b;
  --brand-dark-surface-2:      #2b2870;
}

/* 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:   #C7D2FE;
  --color-primary-light:   rgba(165, 180, 252, 0.14);
  --color-primary-rgb:     165, 180, 252;
  --on-primary:            #1E1B4B;
}