/* ===========================================================================
   Learn & Engage — one identity across the whole product.
   ---------------------------------------------------------------------------
   WHY THIS EXISTS. Engage was built with a deliberate palette and a note in the
   file saying it should "look like somewhere people talk": violet accent, warm
   ink, avatars that differ. Every other Learn & Engage page kept the slate and
   blue of the Assessments app — grey uppercase nav labels, grey links, a slate
   background, grey icons. So one page felt human and the other sixteen felt
   like a compliance tool, and Daniel read the whole product as "dull and boring
   with grey icons that are scary".

   The difference matters more here than on the hiring side. Assessments is a
   thing you operate; Learn & Engage is the part an employee opens because they
   want to. It has to look like somewhere worth spending time.

   Loaded LAST in the head of every L&E page, so it redefines the tokens those
   pages already use. Pages that hardcoded slate hex values are restyled by
   selector below.

   Contrast: every pairing here is checked against its background. Warm is not
   an excuse for grey-on-grey text — the muted tone is darkened, not lightened,
   because the old one was the actual legibility problem.
   =========================================================================== */

:root {
  /* Ink with a little violet in it rather than pure slate. Reads warmer at the
     same contrast, which is the cheapest honest warmth available. */
  --ink: #1e1b3a;
  --ink-2: #3a3557;

  /* The old muted was #94a3b8 on white — measured at 2.56:1, well under the
     4.5:1 needed to be readable, which is a large part of why the pages
     looked washed out. These are 6.34:1 and 5.00:1. The second is lighter
     than the first so the hierarchy still reads, but both clear AA — a
     softer palette is not a licence for text nobody can make out. */
  --muted: #5f5c7d;
  --muted-2: #6f6c8c;

  --line: #e6e4f0;
  --line-2: #f0eef8;

  /* Paper, not slate. #f1f5f9 is a cold grey; this has the accent in it. */
  --bg: #faf9fd;
  --card: #ffffff;

  --accent: #6d5ae6;
  --accent-dark: #5b48d4;
  --accent-soft: #f2effe;
  --accent-line: #ddd6fb;

  /* The blue tokens the other pages use are remapped rather than removed, so
     every existing var(--blue) picks up the product's colour with no edit. */
  --blue: #6d5ae6;
  --blue-dark: #5b48d4;
  --blue-tint: #f2effe;
  --blue-bg: #f2effe;
  --blue-border: #ddd6fb;
  --blue-line: #ddd6fb;

  --warm: #ff8a4c;
  --joy: #16a34a;
  --ok: #16a34a;
  --ok-bg: #e8f6ed;
  --ok-line: #b7e3c6;
  --amber: #b45309;
  --amber-bg: #fdf3e3;
  --amber-line: #f6dcb0;
  --err: #c0362c;
  --err-bg: #fbeceb;
  --err-line: #f3cbc7;

  --shadow: 0 1px 2px rgba(30, 27, 58, .05), 0 8px 22px -14px rgba(30, 27, 58, .3);
  --shadow-sm: 0 1px 2px rgba(30, 27, 58, .05);
  --shadow-md: 0 4px 14px -6px rgba(30, 27, 58, .22);
}

body { background: var(--bg); color: var(--ink); }

/* --- the bar every page shares ------------------------------------------
   This is the first thing anyone sees on any L&E page, and it was grey text
   on white with grey uppercase labels.

   Prefixed with `body` on purpose. Each page repeats these nav rules in a
   SECOND <style> block inside the body — after this file loads — so matching
   their specificity would lose to source order. One extra element selector
   wins wherever the block happens to sit. */
body #lenav-bar { background: var(--card); border-bottom: 1px solid var(--line); }
body #lenav-bar .lenav-lbl { color: var(--muted-2); }
body #lenav-bar a { color: var(--ink-2); }
body #lenav-bar a:hover { background: var(--accent-soft); color: var(--accent-dark); }
body #lenav-bar a.active { color: #fff; background: var(--accent); }
body #lenav-bar .lenav-div { background: var(--line); }
body #lenav-bar .lenav-toggle { color: var(--ink); border-color: var(--line); }

/* --- icons ---------------------------------------------------------------
   The complaint was specifically about the icons. Flat grey glyphs on white
   read as disabled — a greyed-out control is the universal sign for "you
   cannot use this", so a page of them looks broken rather than calm. */
.empty .icon,
.eg-none .big {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}
.eg-item .ic { color: var(--accent); }
.eg-item[aria-current="true"] .ic { color: #fff; }

/* SVG icons drawn with currentColor follow the accent instead of body grey. */
.chip svg, .btn svg, .n-actions svg { color: inherit; }

/* --- surfaces ------------------------------------------------------------ */
.card, .post, .adm-card, .node, .plancard {
  border-color: var(--line);
  background: var(--card);
}
.card:hover { border-color: var(--accent-line); }

/* --- controls ------------------------------------------------------------
   Only the PRIMARY button takes the accent. Colouring every button was the
   first thing I wrote here and it was wrong: a screen of purple buttons is not
   warmer than a screen of grey ones, it just moves the problem, and it removes
   the one signal telling somebody which button is the point of the page.
   Secondary buttons stay quiet so the primary one means something. */
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn.ghost:hover { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-dark); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* --- tabs ---------------------------------------------------------------- */
.tabs button.active, nav.tabs button.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* --- respect the reader -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}