/* ── Design tokens — EnviroDNA Brand Guidelines 2025 ─────────────
   Source: assets/updates-202610/EnviroDNA_BrandGuidlines_2025.pdf
   p.14 palette (exact):  Sky Blue #249FDA · Midnight Blue #00253D
                          Indigo #5155CC  · Bright Lime #D8FE7D
   The guide shows four lighter tints of each colour (80/60/40/20%) without
   values; the tints used here were sampled from the guide's own swatches.
   Greys (page background, alt surfaces) are not covered by the guide.
   p.13 typography: Poppins for UI text, Merriweather for hero messages
   (see css/fonts.css). The Flutter app mirrors these values in
   flutter_src/lib/theme/brand.dart — change both together. */
:root {
  /* Brand */
  --color-primary:        #249FDA;  /* Sky Blue */
  --color-primary-hover:  #60AEE1;  /* Sky Blue 80% tint */
  --color-primary-active: #88BEE7;  /* Sky Blue 60% tint */
  --color-primary-rgb:    36, 159, 218;
  /* Text and icons on a Sky Blue fill. Midnight, not white: 5.3:1 against
     Sky Blue where white manages 3.0:1 (and 6.5:1 / 8:1 on the tints). */
  --color-on-primary:     #00253D;
  --color-accent:         #5155CC;  /* Indigo */

  /* Light mode */
  --color-bg:             #F1F5F6;
  --color-bg-login:       #AFD1EE;  /* Sky Blue 40% tint */
  --color-surface:        #FFFFFF;
  --color-surface-alt:    #E8EEF0;
  --color-text:           #00253D;  /* Midnight Blue */
  --color-text-muted:     #575F71;  /* Midnight Blue 60% tint */
  --color-text-inverse:   #FFFFFF;
  --color-accent-alt:     #5155CC;  /* Indigo */
  --color-border-strong:  #B7B8C1;  /* Midnight Blue 20% tint */

  /* Nav menu (drawer). Its own tokens rather than --color-accent, which also
     paints the samples table header, config badges and the login highlight —
     the menu is being recoloured, not the accent. */
  --color-menu-bg:        #AFD1EE;  /* Sky Blue 40% tint */
  --color-menu-fg:        #00253D;

  /* Shared */
  --color-dark:           #00253D;  /* Midnight Blue */
  --color-dark-rgb:       0, 37, 61;
  --color-white:          #FFFFFF;

  /* Typography */
  --font-body:            'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-hero:            'Merriweather', Georgia, 'Times New Roman', serif;

  /* Font scale */
  --font-scale:           1;

  /* Layout */
  --action-bar-height:    72px;

  /* Transitions */
  --transition-theme: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;

  /* Bootstrap 5.3 reads these, so its own components (links, focus rings,
     .text-primary, checkboxes via the rules in app.css) stop falling back
     to Bootstrap blue. */
  --bs-primary:           var(--color-primary);
  --bs-primary-rgb:       var(--color-primary-rgb);
  --bs-link-color:        var(--color-primary);
  --bs-link-color-rgb:    var(--color-primary-rgb);
  --bs-link-hover-color:  var(--color-primary-hover);
  --bs-focus-ring-color:  rgba(var(--color-primary-rgb), 0.25);
  --bs-body-font-family:  var(--font-body);
  --bs-body-color:        var(--color-text);
}

[data-theme="dark"] {
  /* The drawer keeps the same face in both themes; override these two if it
     should go dark alongside the rest of the app. */
  --color-menu-bg:        #AFD1EE;
  --color-menu-fg:        #00253D;

  --color-bg:             #00253D;  /* Midnight Blue */
  --color-bg-login:       #00253D;
  --color-surface:        #2F4154;  /* Midnight Blue 80% tint */
  --color-surface-alt:    #2F4154;
  --color-text:           #FFFFFF;
  --color-text-muted:     #B7B8C1;  /* Midnight Blue 20% tint */
  --color-text-inverse:   #00253D;
  --color-accent-alt:     #D8FE7D;  /* Bright Lime */
  --color-border-strong:  #575F71;  /* Midnight Blue 60% tint */
}