/**
 * WaveMachine Labs Dark — Drumagog Dark on a black ground, for the
 * wavemachinelabs.com home page and every page served on that domain (owner,
 * 2026-09-30: "Redo the wavemachinelabs site with the drumagog 6 image at the
 * top ... and make the theme black").
 *
 * drumagog_dark/css/dark.css does all the component work through its --dg-*
 * tokens; this file repoints those tokens (and the Bootstrap variables that
 * carry literal RGB triplets) at neutral blacks and grays, so nothing here is
 * navy. The call-to-action accent stays Drumagog 6's coral with dark label
 * text, exactly as dark.css wires it.
 */

:root {
  --dg-bg0: #000000;          /* header and footer: one black ground with the page */
  --dg-bg1: #000000;          /* page */
  --dg-bg2: #111111;          /* raised panels (.bg-light) */
  --dg-card: #151515;
  --dg-card-hi: #1f1f1f;
  --dg-field: #2b2b2b;        /* lighter than the cards: where to type is obvious */
  --dg-field-border: rgba(255, 255, 255, 0.30);
  --dg-line: rgba(255, 255, 255, 0.12);
  --dg-line-soft: rgba(255, 255, 255, 0.06);
  --dg-ink: #ffffff;
  --dg-body: #e4e4e4;
  --dg-dim: #a8a8a8;
  --dg-blue: #6fb4ff;

  --beo-body-bg: var(--dg-bg1);
  --beo-body-bg-rgb: 0, 0, 0;
  --beo-body-color: var(--dg-body);
  --beo-body-color-rgb: 228, 228, 228;
  --beo-info: var(--dg-blue);
  --beo-info-rgb: 111, 180, 255;
  --beo-light: var(--dg-card);
  --beo-light-rgb: 21, 21, 21;
  --beo-dark: var(--dg-bg0);
  --beo-dark-rgb: 0, 0, 0;

  --beo-gray-100: #151515;
  --beo-gray-200: #1f1f1f;
  --beo-gray-300: #2a2a2a;
  --beo-gray-400: #4d4d4d;
  --beo-gray-500: #737373;
  --beo-gray-600: #a8a8a8;
  --beo-gray-700: #e4e4e4;
  --beo-gray-800: #ededed;
  --beo-gray-900: #ffffff;
  --beo-gray: #a8a8a8;
  --beo-gray-dark: #ededed;
}

/* With the header on the page's own black, the top bar (menu, basket, log
   in) keeps a lifted strip and a hairline so it still reads as a bar. */
.region-top-bar {
  background-color: #111111 !important;
  border-bottom: 1px solid var(--dg-line);
}

/* dark.css hard-codes a navy hover for the quiet buttons. */
.btn-secondary:hover,
.btn-light:hover {
  background-color: #2a2a2a;
}

/* The header lockup is an inline image in a custom block shared with the
   light theme, so it is swapped here: the white copy of the same artwork
   (images/wml-logo-light.png, same size and edges). dark.css already flips it
   with a filter, which keeps it white in a browser that ignores content: on an
   <img>. */
.region-header img[src*="wml"],
.region-navigation img[src*="wml"],
.region-top-bar img[src*="wml"] {
  content: url("../images/wml-logo-light.png");
}

/* The home page's hero and product tiles: a hairline so the Drumagog 6
   banner's navy ground reads as a framed image on black. */
.block-inline-blockbasic .wml-hero img {
  border: 1px solid var(--dg-line);
  border-radius: 12px;
}