/* Valhalla Europe brand tokens — source: brand/README.md (2023 VÆ Brand Guidelines, re-rooted per THE VALHALLA ARTIFACT, Part 1).
   Staff app only. Anything a tenant's customers see uses the tenant's own brand settings, not these tokens. */

:root {
  /* Palette */
  --vae-blue: #003f99;        /* Dark Cyan Blue — primary, ~60 % */
  --vae-gray-900: #212121;    /* Dark Gray */
  --vae-gray-500: #808080;    /* Trolley Gray */
  --vae-gray-100: #efefef;    /* Light Gray */
  --vae-gray-50: #f7f7f7;     /* Earthborn Bugle — lightest background */
  --vae-yellow: #f2e219;      /* Darker Dandelion — accent, ~10 %; in the app: "this needs you" */

  /* Roles (light mode) — mapping per artifact Part 1 "How the app wears the brand" */
  --vae-bg: var(--vae-gray-50);
  --vae-surface: #ffffff;
  --vae-surface-muted: var(--vae-gray-100);
  --vae-text: var(--vae-gray-900);
  --vae-text-muted: var(--vae-gray-500);
  --vae-nav-bg: var(--vae-blue);
  --vae-nav-text: var(--vae-gray-100);
  --vae-primary: var(--vae-blue);
  --vae-on-primary: #ffffff;
  --vae-attention: var(--vae-yellow);
  --vae-on-attention: var(--vae-gray-900);

  /* Type */
  --vae-font-heading: "Montserrat", system-ui, sans-serif;  /* titles, headings, buttons — bold */
  --vae-font-subheading: "Raleway", system-ui, sans-serif;  /* subheadings — bold */
  --vae-font-body: "Hind", system-ui, sans-serif;           /* body, tables, forms — regular */
}

/* Dark mode = Dark Gray with blue and yellow (artifact Part 1).
   The two surface grays below (#2b2b2b, #333333) and #b3b3b3 are suggestions, not from the guidelines. */
:root[data-theme="dark"] {
  --vae-bg: var(--vae-gray-900);
  --vae-surface: #2b2b2b;
  --vae-surface-muted: #333333;
  --vae-text: var(--vae-gray-100);
  --vae-text-muted: #b3b3b3;
  --vae-nav-bg: var(--vae-gray-900);
  --vae-nav-text: var(--vae-gray-100);
}