/* ===============================================================
   EMPLOYEE ONBOARDING — use-case page overrides
   ---------------------------------------------------------------
   Reuses css/base.css + css/real-estate.css (shared template) +
   css/use-case.css (uc-* patterns). This sheet swaps the palette
   to the onboarding identity: first-day green over a deep
   forest-dark world, with a rising-path motif in the hero.
   =============================================================== */

:root {
  --bg-elev:     #0c2418;
  --bg-elev-2:   #16402b;
  --ink:         #f0f7f1;
  --ink-muted:   #92bda3;
  --ink-dim:     #5a8268;
  --line:        rgba(146, 189, 163, 0.12);
  --line-strong: rgba(146, 189, 163, 0.28);

  --amber:       #39e58c;
  --amber-soft:  #7df0b4;
  --accent:      #39e58c;
  --accent-soft: #7df0b4;
  --cyan:        #39e58c;

  /* Context categories (names reuse real-estate.css's data-theme wiring) */
  --cat-aml:         #39e58c;  /* retail        — green  */
  --cat-fairhousing: #4d9fff;  /* real estate   — blue   */
  --cat-conduct:     #c4b0ff;  /* hospitality   — violet */
  --cat-cyber:       #5ae8ff;  /* logistics     — cyan   */
  --cat-negotiation: #ffb05c;  /* oil & gas     — amber  */
  --cat-pipeline:    #ffb05c;
  --cat-lifecycle:   #ff7e8a;

  --glass-bg:     rgba(8, 28, 18, 0.55);
  --glass-border: rgba(255, 255, 255, 0.14);
}

/* Forest-dark world — canvas + blooms recolor */
.re-canvas {
  background: linear-gradient(180deg,
    #135c38 0%,
    #07291a 14%,
    #020905 30%,
    #0d3d26 52%,
    #020a06 76%,
    #104a2e 100%);
}
.re-blooms {
  background:
    radial-gradient(40% 30% at 18% 12%, rgba(57, 229, 140, 0.14), transparent 60%),
    radial-gradient(45% 35% at 85% 50%, rgba(90, 232, 255, 0.10), transparent 60%),
    radial-gradient(40% 30% at 12% 86%, rgba(255, 176, 92, 0.08), transparent 60%);
  background-size: 140% 140%;
}

/* ---------------------------------------------------------------
   HERO — no video; green light wells over a rising step motif
   --------------------------------------------------------------- */
.re-hero-fallback {
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 60% at 25% 35%, rgba(20, 92, 56, 0.55), transparent 65%),
    radial-gradient(ellipse 50% 50% at 80% 70%, rgba(10, 46, 28, 0.6), transparent 70%),
    #020805;
}
.re-hero-fallback::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(57, 229, 140, 0.05) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(90deg, rgba(57, 229, 140, 0.035) 0 1px, transparent 1px 220px);
  mask-image: linear-gradient(105deg, transparent 5%, #000 40%, transparent 90%);
  -webkit-mask-image: linear-gradient(105deg, transparent 5%, #000 40%, transparent 90%);
}