/* Nouria brand theme.
 *
 * Colours are the ones the Angular page this replaces shipped
 * (customerauxiliarypages projects/h5-nouria/src/styles.scss): primary #13294B from its
 * "midnight" palette, hover midnight 800 #42546F, and #D50000 for errors. Neutrals, the
 * form-field grey and the font stack match rottenrobbie.css: the legacy page used Material's
 * defaults, so Roboto where the device has it, else Helvetica Neue, with nothing to download.
 *
 * Muted text is grey 700 rather than the legacy 54% grey, which is too faint for form labels.
 */

[data-theme='nouria'] {
  --color-primary: #13294b;
  --color-primary-hover: #42546f;
  --color-accent: #9e9e9e;
  --color-danger: #d50000;
  --color-success: #2e7d32;
  --color-text: #212121;
  --color-text-muted: #616161;
  --color-bg: #ffffff;
  --color-bg-muted: #f5f5f5;
  --color-border: #949494;
  --color-overlay: rgba(33, 33, 33, 0.6);

  --font-normal: Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-bold: Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Dark mode, for ?viewMode=dark (features.darkMode). The legacy page's Material dark theme:
 * background #303030, cards #424242, primary midnight 500 #9EA7B5 carrying navy text, hover
 * midnight A400 #C4CAD2, text grey A400. Errors take its red A100 rather than A200, which is
 * 4.3:1 on #303030.
 *
 * ponytail: keyed on :has(), so iOS before 15.4 and WebView before Chrome 105 show the light
 * theme. Same ceiling as rottenrobbie.css. */
[data-theme='nouria']:has([data-dark]) {
  color-scheme: dark;
  --color-primary: #9ea7b5;
  --color-primary-hover: #c4cad2;
  --color-danger: #ff8a80;
  --color-success: #81c784;
  --color-text: #bdbdbd;
  --color-text-muted: #9e9e9e;
  --color-bg: #303030;
  --color-bg-muted: #424242;
  --color-border: #8a8a8a;
  --color-overlay: rgba(0, 0, 0, 0.6);
}

/* The legacy dark button: navy text on the light primary (6:1), not white (2.3:1). */
[data-theme='nouria']:has([data-dark]) .btn-primary {
  color: #13294b;
}

[data-theme='nouria']:has([data-dark]) .form-input,
[data-theme='nouria']:has([data-dark]) dialog {
  background-color: var(--color-bg-muted);
  color: var(--color-text);
}