/* =====================================================
   /assets/css/tokens.css
   EventHub — single source of truth for BRAND tokens.
   Load this FIRST on every page (login pages + app header),
   before access.css / main.css / menu.css.
   Change the brand color here and it updates everywhere.
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Brand accent — the EH logo slate blue */
  --brand:        #5E7C9E;
  --brand-strong: #486484;                    /* hover / pressed */
  --brand-tint:   rgba(94, 124, 158, 0.12);   /* soft fill (active pill) */
  --brand-ring:   rgba(94, 124, 158, 0.26);   /* focus ring */

  /* Shared geometry */
  --radius:    12px;   /* controls, inputs, buttons */
  --radius-lg: 20px;   /* cards, modals */

  /* Typefaces */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Dark mode — the brand lightens so it reads on dark surfaces */
html.dark-mode {
  --brand:        #92AECB;
  --brand-strong: #7A9AB8;
  --brand-tint:   rgba(146, 174, 203, 0.16);
  --brand-ring:   rgba(146, 174, 203, 0.30);
}