/* ============================================================
   GRÄSKE BRAND OVERRIDE  — loaded after colors_and_type.css + kit.css
   Abschleppdienst Gräske e.K. · ACE Mobilitätspartner
   ------------------------------------------------------------
   Same industrial high-vis system as the base kit, but flipped
   to match the fleet: SIGNAL RED dominant, ACE yellow + black as
   accents. We remap the kit's "signal-yellow" token to red so the
   existing components inherit the new brand, and keep a dedicated
   --ace-yellow for the genuine yellow moments (wordmark script,
   ACE badge, hazard stripe).
   ============================================================ */
:root {
  /* brand RED — matches the trucks (Mercedes Atego / Isuzu D-Max livery) */
  --graeske-red:   #E2231A;
  --graeske-red-d: #B5160F;   /* pressed / chunky shadow edge */

  /* the kit reads --signal-yellow as its single accent everywhere → make it RED */
  --signal-yellow:   var(--graeske-red);
  --signal-yellow-d: var(--graeske-red-d);

  /* genuine ACE yellow, used deliberately for brand marks */
  --ace-yellow:   #FFD500;
  --ace-yellow-d: #E6BE00;

  --accent:       var(--graeske-red);
  --accent-press: var(--graeske-red-d);
  --danger:       var(--graeske-red);
  --focus-ring:   0 0 0 3px rgba(226,35,26,0.5);
}

/* ---- fix spots that previously assumed a LIGHT (yellow) accent ---- */

/* primary button: red fill needs white text */
.btn-primary { color: #fff !important; }
/* dark button: yellow-on-black → red text is too low-contrast, use white */
.btn-dark { color: #fff !important; }
.btn-dark:hover { color: #fff !important; }

/* live dot pulse glow → red */
.livedot { background: var(--graeske-red); box-shadow: 0 0 0 0 rgba(226,35,26,.7); }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(226,35,26,.6); }
  70%  { box-shadow: 0 0 0 9px rgba(226,35,26,0); }
  100% { box-shadow: 0 0 0 0 rgba(226,35,26,0); }
}

/* hazard stripe stays the universal caution scheme: BLACK + ACE YELLOW
   (kit.css already hardcodes #FFD500/#0A0A0A — keep it, just reaffirm) */
.hazard { background: repeating-linear-gradient(45deg,#0A0A0A 0 16px,var(--ace-yellow) 16px 32px); }

/* timeline / about year badge → red box, white text */
.ms-badge { background: var(--graeske-red); color: #fff; }

/* eyebrow on dark: brand red reads a touch weak on near-black at small sizes,
   nudge to a brighter red for legibility */
.eyebrow.on-dark { color: #FF4438; }
.crumbs a { color: #FF4438; }