/* ============================================================
   THEME: LIGHT. v1.
   Cool off white ground, charcoal type, OnPoint green as the
   single accent. Loads on top of site.css, which holds every
   colour in a token, so this sheet only re-points the tokens.

   Three things stay dark on purpose:
   the hero video and its scrim, the builder to builder band,
   and the CTA over the night photo. Contrast against a light
   page is what makes them land.
   ============================================================ */

:root {
  /* ground */
  --bg: #F6F7F5;
  --bg-alt: #EEF0EE;
  --bg-deep: #FFFFFF;
  --card: #FFFFFF;

  /* type */
  --text: #14161A;
  --text-rgb: 20, 22, 26;
  --grey: #676B6F;            /* #7A7E82 measured 3.80:1 on the alt ground, so it went darker. 4.67:1 */
  --hair: #DCDFDD;

  /* the panels that were already light in the dark build */
  --light: #FFFFFF;
  --light-2: #EEF0EE;
  --ink: #14161A;
  --ink-rgb: 20, 22, 26;
  --ink-soft: #4A4E52;
  --hair-dark: #DCDFDD;
  --placeholder: #9BA09C;
  --err: #A8402F;

  /* accent */
  --accent: #4FAF47;
  --accent-rgb: 79, 175, 71;
  --accent-hover: #3E8F36;
  --accent-strong: #3E8F36;   /* large green words, 3.76:1 */
  --accent-text: #35772E;     /* small tracked green, 5.10:1 */
  --accent-panel: #35772E;
  --accent-ink: #10120F;      /* type on a green fill, 6.7:1 */
}

/* the boot curtain is the logo switching on, so it holds the dark ground */
.boot { background: #0D0E0F; }

/* ------------------------------------------------------------
   HEADER. Light type while it floats over the hero video,
   theme ground and charcoal type once it goes solid.
   ------------------------------------------------------------ */
.head:not(.solid) {
  --text: #EDEDEA;
  --text-rgb: 237, 237, 234;
  --hair: rgba(237, 237, 234, 0.12);
  --accent-text: var(--accent);
  --accent-strong: var(--accent);
}
html.menu-open .head { background: var(--bg); border-bottom-color: #DCDFDD; }
html.menu-open .head:not(.solid) {
  --text: #14161A;
  --text-rgb: 20, 22, 26;
  --hair: #DCDFDD;
  --accent-text: #35772E;
}

/* ------------------------------------------------------------
   THE BLOCKS THAT STAY DARK. Scoping the tokens to the subtree
   flips every rule inside back to the dark build in one move.
   ------------------------------------------------------------ */
.hero,
.cta,
.b2b,
.rail-item,
.pj-hero {
  --bg: #121314;
  --bg-alt: #1B1C1D;
  --bg-deep: #0D0E0F;
  --card: #1B1C1D;
  --text: #EDEDEA;
  --text-rgb: 237, 237, 234;
  --grey: #9A9C9A;
  --hair: rgba(237, 237, 234, 0.12);
  --accent: #53AE47;
  --accent-rgb: 83, 174, 71;
  --accent-strong: #53AE47;
  --accent-text: #53AE47;
  --accent-ink: #0D0E0F;
}
.b2b { background: #16171A; }
.b2b-grid { border-top-color: rgba(83, 174, 71, 0.5); }

/* ------------------------------------------------------------
   THE MANIFESTO. A white block, charcoal lines, green words.
   ------------------------------------------------------------ */
.manifesto { background: #FFFFFF; }
.mline { border-top-color: #E4E7E4; }

/* ------------------------------------------------------------
   Low alpha type that reads on charcoal but not on off white.
   Each of these measured under 4.5:1, so they take the muted grey.
   ------------------------------------------------------------ */
.ticker-set span,
.l-name em,
.footer-blurb,
.footer-bottom,
.board-empty { color: var(--grey); }
@media (max-width: 860px) { .l-name em { color: var(--grey); } }

.stop-n { color: var(--accent-text); }
.stop::before { background: rgba(79, 175, 71, 0.45); }
.standard-col { border-top-color: rgba(79, 175, 71, 0.4); }

/* the green hairlines above the grids sit on a pale ground now */
.moves-grid,
.b2b-grid,
.bignums-grid,
.ledger-total span,
.ledger-hrow,
.pj-fact,
.cap-meta div,
.cap-svc div,
.cap-stop,
.cap-contact div { border-top-color: rgba(79, 175, 71, 0.55); }
.ledger-hrow { border-bottom-color: rgba(79, 175, 71, 0.55); }

/* ------------------------------------------------------------
   Buttons. The dark build inverts green to off white on hover,
   so the light build inverts it to charcoal.
   ------------------------------------------------------------ */
.btn-green:hover { background: var(--ink); color: #F6F7F5; }
.cta .btn-green:hover { background: #EDEDEA; color: #0D0E0F; }

/* ------------------------------------------------------------
   Cards and photo frames that were near black.
   ------------------------------------------------------------ */
.feature-panel { background: #FFFFFF; }
.portal-card { background: #FFFFFF; }
.lrow-peek { background: #FFFFFF; border-color: #DCDFDD; box-shadow: 0 20px 44px rgba(20, 22, 26, 0.16); }
.acc-figure,
.crew-media,
.lrow-shots img,
.pj-grid img { background: #E4E7E4; }
.acc-figure img { filter: saturate(0.95) brightness(0.96); }
.crew-media img { filter: saturate(0.95) brightness(0.98); }

/* the credentials strip, one step warmer than the ground */
.creds { background: #EEF0EE; }

/* the form underlines */
.field input, .field select, .field textarea { border-bottom-color: #C9CDC9; }

/* footer sits on white, one shade off the ground */
.footer { background: #FFFFFF; border-top: 1px solid #E4E7E4; }

/* the two credential marks were graded for a charcoal page. On a light
   strip they read as grey on grey, so they come up. */
.cred-logo { opacity: 0.82; }