/* Mess → Lanes: palette variants matched to the How We Use AI site (src/front.css, src/shared.css,
   guide styles.css). Load AFTER mess-to-lanes.css. Switching palettes is one line: add ONE class to
   the component div, e.g. <div class="mtl mtl--autumn" data-mess-to-lanes></div>
   (no class = the original teal). Motion and text are untouched; only colours change.
   All text meets WCAG AA (>= 4.5:1) against the darkest/lightest point of each background. */

/* ---- Autumn: site terracotta (--amber/--rust #A34A25) deepening to the guide's gold-brown (#8F5418) ---- */
.mtl.mtl--autumn {
  --mtl-bg: #A34A25;       /* site terracotta */
  --mtl-bg-deep: #8F5418;  /* guide --amber, deep gold-brown */
  --mtl-line: #FBF3E8;     /* site light cream text (5.36:1 on #A34A25) */
  --mtl-soft: #F5E6D3;     /* site sitebar cream (4.81:1 on #A34A25) */
  --mtl-faint: #F5E6D3;    /* worries: same cream, italic keeps them quieter */
  --mtl-accent: #E8B770;   /* site gold, same as the nav pill (3.21:1; graphics need 3:1) */
}
.mtl--autumn .mtl__replay { opacity: 1; border-color: rgba(251, 243, 232, 0.6); }
.mtl--autumn .mtl__replay:hover { background: rgba(251, 243, 232, 0.12); }
.mtl--autumn .mtl__replay:focus-visible { outline-color: #F2C98A; }

/* ---- Cream: site guide cream (#F4EADC -> #EFE2D0), charcoal lines, terracotta accent ---- */
.mtl.mtl--cream {
  --mtl-bg: #F4EADC;       /* guide --bg / footer */
  --mtl-bg-deep: #EFE2D0;  /* guide --bg-2 */
  --mtl-line: #3D2C29;     /* site charcoal (10.35:1 on #EFE2D0) */
  --mtl-soft: #62524C;     /* front --muted (5.81:1 on #EFE2D0) */
  --mtl-faint: #62524C;
  --mtl-accent: #A34A25;   /* site terracotta (4.62:1 on #EFE2D0) */
  box-shadow: inset 0 0 0 1px rgba(61, 44, 41, 0.14);  /* site --line, lifts it off the #FAF4EB page */
}
.mtl--cream .mtl__lane-name { fill: #2A1D1B; }
.mtl--cream .mtl__headline { color: #2A1D1B; }
.mtl--cream .mtl__replay { opacity: 1; color: #2A1D1B; border-color: rgba(61, 44, 41, 0.35); }
.mtl--cream .mtl__replay:hover { background: rgba(61, 44, 41, 0.06); }
.mtl--cream .mtl__replay:focus-visible { outline-color: #A34A25; }