/*
 * Turns the cream-ground careers pages dark, so they sit inside garde.app
 * without a seam.
 *
 * Only four pages load this: index, roles, thanks and privacy. The four role
 * pages were already dark — their body is `background: var(--ink)` — which is
 * why the merge is a much smaller change than it looks.
 *
 * Loaded after styles.css and after each page's inline <style>, so it wins on
 * equal specificity and needs no !important.
 *
 * Deliberately narrow. It flips the page ground and the two token pairs that
 * were built for a light ground, and touches nothing else. Form fields stay
 * cream on purpose: that is exactly what the already-dark role pages do, and
 * a light field is the clearest signal on a dark page that a thing is
 * fillable.
 */

:root {
  /* Ground and the text on it. #1E1E08 is garde-green from the marketing
     site's own palette, so the page and the nav above it are the same colour
     rather than nearly the same colour. */
  --page: #1e1e08;
  --panel: #25260b;

  /* These two were ink at low opacity — built to sit on cream. On ink they
     disappear, so they become cream at low opacity instead. */
  --ink-soft: rgba(245, 245, 237, 0.72);
  --ink-line: rgba(245, 245, 237, 0.24);

  /* index.html and roles.html carry their own cream-ground pair. Both files
     already define the ink-ground equivalents (--ink-hair, --ink-muted); these
     are those same values. */
  --hair: #3a3b22;
  --muted: #a7ab98;
}

body {
  background: var(--page);
  color: var(--cream);
}

/* Cards were cream on cream. On ink they become the raised panel the role
   pages already use.
   .strip is the open-roles list and .grow-card the culture cards, both on
   index.html; .card is the shared one in styles.css. */
.card,
.strip,
.grow-card {
  background: var(--panel);
  border-color: #3a3b22;
}

/* The hero already painted itself ink to stand out from a cream page. Now
   that the whole page is ink, it should simply be the page. */
.hero {
  background: transparent;
}

/* Two pieces of emphasis were picked for a cream ground and vanish on ink.
   Forest green is a light-ground colour; chartreuse is what the hero already
   uses for the same job one screen further up. */
.em-forest {
  color: var(--chartreuse);
}

/* Links that were ink on a cream ground: the "See all roles" line under the
   open-roles list, and the "write to us" line at the foot of roles.html. */
.strip .soon a,
.ask a {
  color: var(--cream);
}
.strip .soon a:hover,
.ask a:hover {
  color: var(--chartreuse);
}