/* Rotten Robbie brand theme.
 *
 * Colours are the ones the Angular page this replaces shipped
 * (customerauxiliarypages projects/h5-rottenrobbie/src/styles.scss): primary #0056AC from its
 * cobalt palette, pressed #00458A (cobalt A100), the form-field underline grey #949494, and
 * #D50000 for errors. Text is Material's grey 900.
 *
 * Two deliberate departures, both for contrast: muted text is grey 700 rather than the
 * legacy 54% grey (3.6:1 on white, too faint for form labels), and dark mode's button text is
 * white rather than the legacy #0056AC on #3378BD (1.9:1, close to unreadable).
 *
 * The legacy page set no font of its own, so it rendered in Material's stack: Roboto where
 * the device has it (Android), else Helvetica Neue (iOS). The same stack needs no download.
 */

[data-theme='rottenrobbie'] {
  --color-primary: #0056ac;
  --color-primary-hover: #00458a;
  --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 cobalt 800 #3378BD, text grey A400, and errors in
 * red 200. color-scheme turns the native inputs, checkbox and dialog dark with it.
 *
 * ponytail: keyed on :has(), so iOS before 15.4 and WebView before Chrome 105 show the light
 * theme. Move the data-dark attribute onto <html> if those devices ever matter. */
[data-theme='rottenrobbie']:has([data-dark]) {
  color-scheme: dark;
  --color-primary: #3378bd;
  --color-primary-hover: #5c93ca;
  --color-danger: #ef9a9a;
  --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);
}

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