/* The dark theme, and the only file that holds it. Everything else about the
   design system lives in styles.css; this is the one override sheet, and it
   overrides nothing but colour.

   It is loaded by views/partials/page-top.ejs in one of three ways, which is
   the whole of the light/dark switch:

     no choice made  <link ... media="(prefers-color-scheme: dark)">  the OS decides
     chose Dark      <link ...>                                       always dark
     chose Light     not linked at all                                always light

   That keeps every value below in exactly one place. The alternative -- an
   attribute on <html> and a `:root[data-theme="dark"]` selector -- needs the
   same block written twice, once for the media query and once for the
   attribute, and these values carry measured contrast ratios that would then
   have two copies to drift apart. A media attribute on a link is older than
   any of it and does the same job.

   Every pair states its measured ratio, the same rule styles.css opens with:
   4.5:1 for text, 3:1 for a line or an edge. Adding a pair means adding the
   number. */
:root {
  color-scheme: dark;
  --bg: #191A1B;            /* Warm Gray, shaded toward black */
  --card: #212324;
  --text: #F1F1F1;          /* Light Gray 20% tint -- 14.0:1 on --card */
  --muted: var(--jhl-light-gray);  /* 8.2:1 on --card */
  --border: #3A3D3F;

  /* Gold clears 7.9:1 on these surfaces, so on dark it can do what it cannot
     do on white: carry text, draw hairlines, and fill the primary button. */
  --accent-edge: var(--jhl-gold);
  --action: var(--jhl-gold);
  --on-action: #323436;     /* 6.2:1 on gold */
  --link: #99BBD0;          /* JHL Blue 40% tint -- 7.8:1 on --card */
  --danger: #F28B82;        /* 6.6:1 on --card; a mid red would be 2.4:1 and unreadable */
  --on-danger: #323436;     /* 5.2:1 */

  /* Picked, not tinted. The 40% tint of #1F7A3D that --link's derivation
     would give (#A5CAB1) goes sage-grey on a dark ground and stops reading
     as green at all -- the same reason --danger here is a picked #F28B82
     rather than a lightened #B3261E. */
  --ok: #81C995;            /* 8.1:1 on --card */
  --on-ok: #323436;         /* 6.4:1 on --ok */
  /* The same value --link takes on dark. A second dark blue would be exactly
     the near-miss this file opens by warning about: one hue, two roles. */
  --info: #99BBD0;          /* 7.8:1 on --card */
  --on-info: #323436;       /* 6.2:1 on --info */
  /* The block inverts the way --muted does: light fill on a dark track. */
  --booked: var(--jhl-light-gray);  /* 8.2:1 on --card */
  --on-booked: #323436;     /* 6.5:1 on --booked */
  --booked-edge: #323436;   /* 6.5:1 against the fill it separates -- invisible
                               against the dark track, which is fine, because
                               the fill's own 8.2:1 already draws the shape */
}

/* The reversed lockups: Bone wordmark, the mark's lower half and the
   endorsement in gold, as the guide's lockups on charcoal. styles.css sets the
   same artwork with Charcoal for Bone; only the variant the theme needs is ever fetched,
   because a background-image the cascade discards is never requested. */
.brand-logo { background-image: url("/sitesync-lockup-dark.svg"); }
.brand-logo--endorsed { background-image: url("/sitesync-endorsed-dark.svg"); }