/* ============================================================================
   OnShift Design DNA — Selvatec (dark).  See design/DNA.md.
   Tokens lifted from selvatec.ca (Selvatec-Website/assets/css/selvatec.css) so
   OnShift reads as part of the same family. Loaded by every layout.

   The app's templates are written in light Tailwind utilities (bg-white,
   text-slate-*, etc.); rather than hand-edit every page, this layer redefines
   those utilities to Selvatec-dark values so the whole app flips consistently
   and reversibly. Element-scoped where a class means two things (nav vs button).
   ============================================================================ */

:root {
  --bg: #0a0e14;
  --surface: #0f1419;
  --elevated: #151b24;
  --elevated-hi: #1a2230;
  --border: #1a2332;
  --border-soft: rgba(26, 35, 50, 0.55);
  --text: #eef3ec;
  --text-2: #b6c0b8;
  --muted: #8a958c;
  --selva: #4a8a52;
  --selva-deep: #355E3B;
  --leaf: #98FB98;
  --tec: #3aa9ea;
  --tec-deep: #007BFF;
  --terra: #e08a4a;
  --terra-deep: #D2691E;
  --sand: #F4A460;
  --danger: #e5484d;
  --tricolor: linear-gradient(90deg, #4a8a52 0%, #3aa9ea 50%, #e08a4a 100%);
  --radius: 10px;
  --font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Poppins', 'Montserrat', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

html, body { background: var(--bg); color: var(--text); font-family: var(--font-body); }
h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--text); }
.font-mono { font-family: var(--font-mono) !important; }

/* ---- surfaces ---- */
.bg-slate-50 { background-color: var(--bg) !important; }
.bg-white { background-color: var(--elevated) !important; }
.bg-slate-100 { background-color: var(--surface) !important; }
.bg-slate-200 { background-color: var(--elevated-hi) !important; }

/* ---- text ---- */
.text-slate-900, .text-slate-800, .text-slate-700 { color: var(--text) !important; }
.text-slate-600, .text-slate-500 { color: var(--text-2) !important; }
.text-slate-400, .text-slate-300 { color: var(--muted) !important; }

/* ---- borders / dividers ---- */
.border-slate-100, .border-slate-200, .border-slate-300, .border-slate-400 { border-color: var(--border) !important; }

/* ---- hover variants: Tailwind emits `.hover\:CLASS:hover`, a different selector
        from the base class, so the base reskin above doesn't cover them. Remap the
        light-surface hovers used by the Add-shift modal so hover doesn't flash a
        light bg / dark text over the dark theme. ---- */
.hover\:text-slate-700:hover, .hover\:text-slate-600:hover { color: var(--text) !important; }
.hover\:bg-slate-50:hover, .hover\:bg-slate-800:hover { background-color: var(--elevated-hi) !important; }
.hover\:border-slate-400:hover { border-color: var(--muted) !important; }
.hover\:bg-emerald-600:hover { background-color: #57a05f !important; }

/* ---- shadows read as lift on dark ---- */
.shadow, .shadow-lg, .shadow-xl { box-shadow: 0 1px 0 rgba(255,255,255,.03), 0 10px 30px rgba(0,0,0,.45) !important; }

/* ---- nav: keep it dark, add the Selvatec tricolor signature hairline ---- */
nav.bg-slate-900 { background: var(--surface) !important; border-bottom: 1px solid var(--border); position: relative; }
nav.bg-slate-900::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--tricolor); }

/* ---- primary dark buttons/links (bg-slate-900) -> Selvatec blue.
        Scoped to button/a so the nav (a <nav>) is untouched. ---- */
button.bg-slate-900, a.bg-slate-900 { background: var(--tec) !important; color: #04121f !important; }
button.bg-slate-900:hover, a.bg-slate-900:hover { background: #5bb8f0 !important; }

/* ---- emerald -> selva green (publish, coverage-met, published, shift band) ---- */
.bg-emerald-700, .bg-emerald-600, .bg-emerald-500 { background-color: var(--selva) !important; }
.bg-emerald-700:hover, .bg-emerald-600:hover { background-color: #57a05f !important; }
.text-emerald-700, .text-emerald-800, .text-emerald-300 { color: var(--leaf) !important; }
.border-emerald-300, .border-emerald-500 { border-color: var(--selva) !important; }
.bg-emerald-50 { background-color: rgba(74,138,82,.14) !important; }

/* ---- status + coverage: understaffed red, partial sand, covered selva ---- */
.bg-red-500 { background-color: var(--danger) !important; }
.bg-amber-400 { background-color: var(--sand) !important; }
.text-red-600, .text-red-700 { color: #ff8a8d !important; }
.border-red-300 { border-color: rgba(229,72,77,.5) !important; }
.bg-red-50 { background-color: rgba(229,72,77,.14) !important; }

/* ---- amber fatigue banner ---- */
.bg-amber-50 { background-color: rgba(244,164,96,.12) !important; }
.border-amber-200 { border-color: rgba(244,164,96,.35) !important; }
.text-amber-800, .text-amber-700 { color: var(--sand) !important; }

/* ---- purple fatigue badge / orange overlap chip -> brand-adjacent tints ---- */
.bg-purple-100 { background-color: rgba(58,169,234,.16) !important; }
.text-purple-800 { color: #9ad2f5 !important; }
.bg-orange-100 { background-color: rgba(224,138,74,.16) !important; }
.text-orange-800 { color: var(--sand) !important; }

/* ---- form controls ---- */
input, select, textarea { background: var(--surface); color: var(--text); border-color: var(--border); }
input::placeholder, textarea::placeholder { color: var(--muted); }
select option { background: var(--surface); color: var(--text); }

/* ---- accessible focus ring in brand blue ---- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--tec); outline-offset: 2px;
}