/* ============================================================================
   ONEEXISTS v1.4.0 — Full dark: material + design + roadmap cards on dark surface
   No more light sections. Cards use warm elevation + subtle silver hairline.
   Loaded AFTER v130-additions.css.
   ============================================================================ */

/* Slightly deeper elevation tone for cards — warm graphite */
:root {
  --oe-elev-1: 42 39 35;    /* #2A2723 — card surface, subtle lift from bg */
  --oe-elev-2: 52 48 43;    /* #34302B — hovered / active card */
  --oe-hairline: 195 200 208;  /* silver hairline base */
}

/* ---------- Material story cards on dark ---------- */
.oe-mat-card {
  background: rgb(var(--oe-elev-1)) !important;
  border: 1px solid rgb(var(--oe-hairline) / 0.12) !important;
  color: rgb(var(--oe-white)) !important;
  transition: border-color .25s ease, background-color .25s ease;
}
.oe-mat-card:hover {
  background: rgb(var(--oe-elev-2)) !important;
  border-color: rgb(var(--oe-hairline) / 0.35) !important;
}
.oe-mat-card__code {
  color: rgb(var(--oe-silver)) !important;
  font-family: var(--oe-font-mono);
  font-size: var(--oe-fs-caption);
  letter-spacing: var(--oe-ls-normal);
}
.oe-mat-card__name { color: rgb(var(--oe-white)) !important; }
.oe-mat-card__sub { color: rgb(var(--oe-silver)) !important; opacity: 0.85; }
.oe-mat-card__lede { color: rgb(var(--oe-silver)) !important; opacity: 0.85; }
.oe-mat-card .oe-btn--tertiary {
  color: rgb(var(--oe-white)) !important;
  border-bottom-color: rgb(var(--oe-white)) !important;
}

/* ---------- Design process cards on dark ---------- */
.oe-design-card__title { color: rgb(var(--oe-white)) !important; }
.oe-design-card__desc { color: rgb(var(--oe-silver)) !important; opacity: 0.85; }
.oe-design-card > .oe-eyebrow { color: rgb(var(--oe-silver)) !important; }

/* Design card figure gets subtle warm placeholder on dark section */
.oe-design-card .oe-placeholder,
.oe-design-card .oe-placeholder--warm {
  background: linear-gradient(135deg, rgb(var(--oe-elev-1)) 0%, rgb(var(--oe-graphite)) 100%) !important;
}
.oe-design-card .oe-placeholder--continental-800 {
  background: linear-gradient(135deg, rgb(var(--oe-silver) / 0.4) 0%, rgb(var(--oe-concrete) / 0.4) 100%) !important;
}
.oe-design-card .oe-placeholder--signature {
  background: linear-gradient(135deg, rgb(var(--oe-elev-2)) 0%, rgb(var(--oe-elev-1)) 100%) !important;
}

/* ---------- Roadmap items on dark — new tonal ladder ---------- */
.oe-roadmap {
  background: rgb(var(--oe-fog)) !important;
  border-color: rgb(var(--oe-fog)) !important;
}
.oe-roadmap__item {
  background: rgb(var(--oe-elev-1)) !important;
  color: rgb(var(--oe-white)) !important;
}
.oe-roadmap__item .oe-eyebrow,
.oe-roadmap__item .oe-roadmap__date { color: rgb(var(--oe-silver)) !important; opacity: 0.85; }
.oe-roadmap__no {
  color: rgb(var(--oe-silver)) !important;
  opacity: 0.6;
  font-family: var(--oe-font-mono);
}
.oe-roadmap__label { color: rgb(var(--oe-white)) !important; }
.oe-roadmap__desc { color: rgb(var(--oe-silver)) !important; opacity: 0.85; }

/* Active milestone: WHITE surface, dark text — strong "now" signal */
.oe-roadmap__item--active {
  background: rgb(var(--oe-white)) !important;
  color: rgb(var(--oe-graphite)) !important;
}
.oe-roadmap__item--active .oe-eyebrow,
.oe-roadmap__item--active .oe-roadmap__date,
.oe-roadmap__item--active .oe-roadmap__no,
.oe-roadmap__item--active .oe-roadmap__label,
.oe-roadmap__item--active .oe-roadmap__desc {
  color: rgb(var(--oe-graphite)) !important;
  opacity: 1;
}

/* ---------- Personalization cards — same tonal system for consistency ---------- */
.oe-pers-card {
  background: rgb(var(--oe-elev-1)) !important;
  border: 1px solid rgb(var(--oe-hairline) / 0.18) !important;
}
.oe-pers-card:hover { border-color: rgb(var(--oe-hairline) / 0.4) !important; }

/* ---------- Section head lede/eyebrow color on default dark ---------- */
.oe-section .oe-section-head .oe-eyebrow { color: rgb(var(--oe-silver)) !important; opacity: 0.85; }
.oe-section .oe-section-head .oe-lede { color: rgb(var(--oe-silver)) !important; opacity: 0.9; }

/* ---------- Process 8-step grid: keep dark but soften grid lines ---------- */
.oe-process {
  background: rgb(var(--oe-fog)) !important;
  border-color: rgb(var(--oe-fog)) !important;
}
.oe-process__step {
  background: rgb(var(--oe-elev-1)) !important;
}
.oe-process__no { color: rgb(var(--oe-silver)) !important; opacity: 0.6; }
.oe-process__label { color: rgb(var(--oe-white)) !important; }
