/* The theme contract — one palette, two skins, everywhere.
 *
 * THE INCIDENT (17 Aug 2026). The owner opened the Store Opportunity Boards
 * on a Mac set to dark mode and got a dark page, then opened any other tool
 * and got a light one. Nothing was broken: `store-board.css` was the ONLY
 * stylesheet in the hub that answered `prefers-color-scheme`, so exactly
 * sixteen pages followed the operating system and the other forty-five did
 * not. The site had no opinion about its own appearance, and the OS filled
 * the gap on a fraction of it.
 *
 * Two things were wrong with that and this file fixes both. The pages now
 * agree with each other, and the person reading them gets a say — a hub that
 * silently changes colour because of a setting in System Preferences is a hub
 * nobody can describe to a colleague over the phone.
 *
 * HOW IT WORKS. Three states, in the order the cascade resolves them:
 *
 *   1. `:root` carries the complete LIGHT palette. This is the identity
 *      everything was designed in and it is the fallback for a page that
 *      loads no script and no preference at all.
 *   2. `@media (prefers-color-scheme: dark)` on `:root:not([data-theme="light"])`
 *      applies the dark palette when the OS asks for it — but only while the
 *      reader has not explicitly chosen light. "Match my system" is the
 *      default, so today's behaviour is preserved for anyone who liked it.
 *   3. `:root[data-theme="dark"]` applies the dark palette outright, so an
 *      explicit choice beats the operating system in both directions.
 *
 * The dark VALUES are written once, as `--d-*` on `:root`, and the two dark
 * blocks only re-point the live tokens at them. A media query and an
 * attribute selector cannot share a body, and a palette maintained in two
 * places drifts — the first colour someone updates in one block and not the
 * other is a bug nobody sees until a screenshot looks wrong.
 *
 * NAMING. Everything here is `--cc-*`. Consuming stylesheets keep their own
 * local vocabulary and alias into these (`--bg: var(--cc-bg)`), so no page
 * has to rename its variables and nothing collides with a page-local `--line`
 * that meant something else.
 *
 * The dark values themselves are not invented: they are the ones
 * `store-board.css` had been using since it was written, which had already
 * been read on real boards for weeks. Only the names moved.
 */

:root {
  /* ---- the dark palette, defined but not applied (see the note above) ---- */
  --d-bg: #0d1420;
  --d-surface: #131c2b;
  --d-surface-2: #182337;
  --d-ink: #e8ecf4;
  --d-muted: #93a0b8;
  --d-line: #22304a;
  --d-line-soft: #1a2537;
  --d-navy: #0a111c;
  --d-blue: #6f9fe0;
  --d-blue-soft: #17263d;
  --d-gold: #d9ad5c;
  --d-gold-soft: #2a2213;
  --d-good: #5fbf83;
  --d-good-soft: #14301f;
  --d-warn: #e0a25c;
  --d-warn-soft: #2c2113;
  --d-bad: #f08b90;
  --d-bad-soft: #331619;
  --d-on-accent: #0d1420;   /* text ON --cc-blue when it is pale */
  --d-shadow: rgba(0, 0, 0, .45);

  /* ---- the light palette, also defined rather than assigned ---- */
  --l-bg: #f7f5ef;
  --l-surface: #ffffff;
  --l-surface-2: #f2efe7;
  --l-ink: #17233b;
  --l-muted: #6b7386;
  --l-line: #e4e0d6;
  --l-line-soft: #efece4;
  --l-navy: #17233b;
  --l-blue: #2a4e7d;
  --l-blue-soft: #eaf1fa;
  --l-gold: #a8792c;
  --l-gold-soft: #fdf6e6;
  --l-good: #1a7a3c;
  --l-good-soft: #eaf6ee;
  --l-warn: #b8600f;
  --l-warn-soft: #fdf1e3;
  --l-bad: #b4232a;
  --l-bad-soft: #fbecec;
  --l-on-accent: #ffffff;   /* text ON --cc-blue when it is deep */
  --l-shadow: rgba(23, 35, 59, .10);

  /* ---- and light is what is live by default ---- */
  --cc-bg: var(--l-bg);
  --cc-surface: var(--l-surface);
  --cc-surface-2: var(--l-surface-2);
  --cc-ink: var(--l-ink);
  --cc-muted: var(--l-muted);
  --cc-line: var(--l-line);
  --cc-line-soft: var(--l-line-soft);
  --cc-navy: var(--l-navy);
  --cc-blue: var(--l-blue);
  --cc-blue-soft: var(--l-blue-soft);
  --cc-gold: var(--l-gold);
  --cc-gold-soft: var(--l-gold-soft);
  --cc-good: var(--l-good);
  --cc-good-soft: var(--l-good-soft);
  --cc-warn: var(--l-warn);
  --cc-warn-soft: var(--l-warn-soft);
  --cc-bad: var(--l-bad);
  --cc-bad-soft: var(--l-bad-soft);
  --cc-on-accent: var(--l-on-accent);
  --cc-shadow: var(--l-shadow);

  /* Tells the browser which way to paint scrollbars, form controls and the
     spaces this stylesheet does not own. Overridden in the dark blocks. */
  color-scheme: light;
}

/* 2 — the operating system's preference, unless the reader has said light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cc-bg: var(--d-bg);
    --cc-surface: var(--d-surface);
    --cc-surface-2: var(--d-surface-2);
    --cc-ink: var(--d-ink);
    --cc-muted: var(--d-muted);
    --cc-line: var(--d-line);
    --cc-line-soft: var(--d-line-soft);
    --cc-navy: var(--d-navy);
    --cc-blue: var(--d-blue);
    --cc-blue-soft: var(--d-blue-soft);
    --cc-gold: var(--d-gold);
    --cc-gold-soft: var(--d-gold-soft);
    --cc-good: var(--d-good);
    --cc-good-soft: var(--d-good-soft);
    --cc-warn: var(--d-warn);
    --cc-warn-soft: var(--d-warn-soft);
    --cc-bad: var(--d-bad);
    --cc-bad-soft: var(--d-bad-soft);
    --cc-on-accent: var(--d-on-accent);
    --cc-shadow: var(--d-shadow);
    color-scheme: dark;
  }
}

/* 3 — an explicit choice, which beats the operating system either way. */
:root[data-theme="dark"] {
  --cc-bg: var(--d-bg);
  --cc-surface: var(--d-surface);
  --cc-surface-2: var(--d-surface-2);
  --cc-ink: var(--d-ink);
  --cc-muted: var(--d-muted);
  --cc-line: var(--d-line);
  --cc-line-soft: var(--d-line-soft);
  --cc-navy: var(--d-navy);
  --cc-blue: var(--d-blue);
  --cc-blue-soft: var(--d-blue-soft);
  --cc-gold: var(--d-gold);
  --cc-gold-soft: var(--d-gold-soft);
  --cc-good: var(--d-good);
  --cc-good-soft: var(--d-good-soft);
  --cc-warn: var(--d-warn);
  --cc-warn-soft: var(--d-warn-soft);
  --cc-bad: var(--d-bad);
  --cc-bad-soft: var(--d-bad-soft);
  --cc-on-accent: var(--d-on-accent);
  --cc-shadow: var(--d-shadow);
  color-scheme: dark;
}

/* Paper is always light. A manager who reads a board in dark mode and then
   prints it should not get a page of near-black ink, and the Assist's review
   is printed often enough that this is not hypothetical — assistant.css has
   had a @media print block since July. This wins over both dark blocks above
   because it is last and equally specific. */
@media print {
  :root,
  :root[data-theme="dark"] {
    --cc-bg: var(--l-bg);
    --cc-surface: var(--l-surface);
    --cc-surface-2: var(--l-surface-2);
    --cc-ink: var(--l-ink);
    --cc-muted: var(--l-muted);
    --cc-line: var(--l-line);
    --cc-line-soft: var(--l-line-soft);
    --cc-navy: var(--l-navy);
    --cc-blue: var(--l-blue);
    --cc-blue-soft: var(--l-blue-soft);
    --cc-gold: var(--l-gold);
    --cc-gold-soft: var(--l-gold-soft);
    --cc-good: var(--l-good);
    --cc-good-soft: var(--l-good-soft);
    --cc-warn: var(--l-warn);
    --cc-warn-soft: var(--l-warn-soft);
    --cc-bad: var(--l-bad);
    --cc-bad-soft: var(--l-bad-soft);
    --cc-on-accent: var(--l-on-accent);
    --cc-shadow: var(--l-shadow);
    color-scheme: light;
  }
  .cc-theme { display: none; }
}

/* ---- the control itself, in the hub bar -----------------------------------
   Three states shown as three segments rather than one cycling button: a
   reader has to be able to see that "Auto" exists and that it is where they
   started, which a button reading "Dark" cannot tell them. */

.cc-theme {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin-left: auto;
  padding: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .16);
}

.cc-theme button {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .72);
  font: inherit;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .04em;
  padding: 5px 9px;
  border-radius: 999px;
  cursor: pointer;
}

.cc-theme button:hover { color: #fff; }

.cc-theme button[aria-pressed="true"] {
  background: rgba(255, 255, 255, .92);
  color: #17233b;
  font-weight: 700;
}

.cc-theme button:focus-visible {
  outline: 2px solid #9ec4ff;
  outline-offset: 2px;
}

/* The bar is dark navy in both themes, so the control's own colours are fixed
   against it rather than themed. It is the one strip on the page that does
   not change, which is what makes it findable.

   The homepage is the exception: it has no hub bar, so the control sits in
   its own header, which follows the theme like everything else. There the
   fixed white-on-dark treatment would be invisible in light mode, so it uses
   the palette instead. */
.site-header .cc-theme {
  background: var(--cc-surface);
  border-color: var(--cc-line);
}
.site-header .cc-theme button { color: var(--cc-muted); }
.site-header .cc-theme button:hover { color: var(--cc-ink); }
.site-header .cc-theme button[aria-pressed="true"] {
  background: var(--cc-blue);
  color: var(--cc-on-accent);
}

@media (max-width: 520px) {
  /* The words go; the shapes stay. Three unlabelled segments are still three
     segments, and the title attribute survives for anyone who needs it. */
  .cc-theme button { padding: 5px 7px; font-size: 10px; }
}

@media (prefers-reduced-motion: no-preference) {
  .cc-theme button { transition: background-color .12s ease, color .12s ease; }
}