/* ============================================================================
   Stratamize brand bridge for vending.stratamize.com (2026-10-16)
   ----------------------------------------------------------------------------
   Loaded after stratamize.css, stratamize-components.css and
   stratamize-vending.css. Retargets the older --sm-* ramps and the --sv-*
   campaign colours onto the Stratamize --stz-* tokens: near-black planes,
   a restrained crimson signal and DM Sans. Theme-independent primitives only,
   so the page looks the same whatever the visitor's OS colour preference.
   :root:root outranks the :root blocks in the earlier files.
   ============================================================================ */

:root:root {
  color-scheme: light dark;

  /* Brand ramp: crimson for the signal steps, near-black for the deep steps. */
  --sm-brand-50:  var(--stz-gray-50);
  --sm-brand-100: var(--stz-gray-200);
  --sm-brand-200: var(--stz-gray-300);
  --sm-brand-300: var(--stz-gray-350);
  --sm-brand-400: var(--stz-crimson-400);
  --sm-brand-500: var(--stz-crimson-500);
  --sm-brand-600: var(--stz-crimson-600);
  --sm-brand-700: var(--stz-crimson-700);
  --sm-brand-800: var(--stz-midnight-800);
  --sm-brand-900: var(--stz-midnight-900);

  /* Cyan was the old decorative hue; it becomes warm neutral + crimson. */
  --sm-cyan-50:  var(--stz-gray-50);
  --sm-cyan-100: var(--stz-gray-100);
  --sm-cyan-200: var(--stz-gray-200);
  --sm-cyan-300: var(--stz-gray-350);
  --sm-cyan-400: var(--stz-crimson-400);
  --sm-cyan-500: var(--stz-crimson-600);
  --sm-cyan-600: var(--stz-crimson-600);
  --sm-cyan-700: var(--stz-crimson-700);
  --sm-cyan-800: var(--stz-crimson-800);
  --sm-cyan-900: var(--stz-midnight-900);

  /* Slate neutrals become the brand's warm grays and near-blacks. */
  --sm-neutral-0:   var(--stz-white);
  --sm-neutral-50:  var(--stz-gray-50);
  --sm-neutral-100: var(--stz-gray-100);
  --sm-neutral-200: var(--stz-gray-200);
  --sm-neutral-300: var(--stz-gray-300);
  --sm-neutral-400: var(--stz-gray-400);
  --sm-neutral-500: var(--stz-gray-600);
  --sm-neutral-600: var(--stz-midnight-700);
  --sm-neutral-700: var(--stz-midnight-800);
  --sm-neutral-800: var(--stz-midnight-900);
  --sm-neutral-900: var(--stz-midnight-950);
  --sm-neutral-950: var(--stz-midnight-950);

  /* Vending campaign colours. */
  --sv-signal:     var(--stz-crimson-400);
  --sv-midnight:   var(--stz-midnight-950);
  --sv-asphalt:    var(--stz-midnight-900);
  --sv-wash-blue:  var(--stz-crimson-600);
  --sv-spray-blue: var(--stz-gray-350);
  --sv-foam:       var(--stz-gray-50);
  --sv-paper:      var(--stz-white);

  /* DM Sans everywhere; the condensed display face is retired. */
  --sm-font-display: var(--stz-font-display);
  --sm-font-ui:      var(--stz-font-body);
}

body { font-family: var(--stz-font-body); }

/* Plain warm canvas instead of the cyan wash. */
body {
  background: var(--stz-gray-50);
}

/* Header: stratamize_ wordmark + quiet product label. */
.site-header .brand .brand-wordmark {
  display: block;
  width: auto;
  height: 22px;
}
.site-header .brand .brand-copy small,
.brand-copy small {
  color: var(--stz-gray-350);
  font-family: var(--stz-font-utility);
  letter-spacing: .2em;
}

/* Primary calls to action: solid crimson with a white label (brand CTA). */
.button.primary,
.landing-header-cta {
  background: var(--stz-action-primary);
  border-color: var(--stz-action-primary);
  color: var(--stz-on-action-primary);
}
.button.primary:hover,
.landing-header-cta:hover {
  background: var(--stz-action-primary-hover);
  border-color: var(--stz-action-primary-hover);
  color: var(--stz-on-action-primary);
}

/* Solid focus ring. */
:focus-visible {
  outline: var(--stz-focus-width) solid var(--stz-crimson-400);
  outline-offset: var(--stz-focus-offset);
}

/* Eyebrows on the near-black sections use the on-dark crimson tint (AA). */
.machine-ui-proof .eyebrow,
.machine-placement-proof .eyebrow,
.machine-order-process .eyebrow {
  color: var(--stz-crimson-400);
}