/*
 * BJC book stylesheets — tokens.
 *
 * The book is styled by the plain CSS files in this directory, linked from
 * book/chrome.html in cascade order: tokens, base, layout, navbar, sidebar,
 * content, quiz, search. This file holds every color, font and size the
 * others share, as custom properties. Light values live on :root; the dark
 * theme is the one override block at the bottom — nothing else in css/
 * mentions a theme, every color is a var(--bjc-…) reference.
 *
 * The palette is the Cosmo Bootswatch variant the old Quarto theme compiled
 * (bjc.scss, in git history): red primary, gray-800 body text, the BJC box
 * colors. Values are copied from that compiled output so the page looks the
 * way it did; change them here and the whole book follows.
 *
 * Dark-mode hook: html[data-theme="dark"]. On the website the attribute is
 * stamped before first paint by /js/theme-boot.js (bhs-cs
 * plans/dark-mode.md; the BJC surface's preference, else the site's); under
 * the standalone preview (books/scripts/serve.ts bjc) the chrome's own script stamps
 * it from localStorage. See chrome.html.
 */

:root {
  /* -- type ---------------------------------------------------------------- */

  /* "Source Sans Pro" heads the stack but is not loaded anywhere (it never
     was — the Quarto theme named it without a @font-face), so the book
     renders in the system sans. Kept for parity; load it or drop it when
     the body font is decided on purpose. */
  --bjc-font-sans: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --bjc-font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;
  --bjc-root-font-size: 17px; /* Cosmo's root size; every rem below is 17px */

  /* -- palette (Cosmo) ------------------------------------------------------ */

  --bjc-red: #ff0039;
  --bjc-blue: #2780e3;
  --bjc-teal: #20c997;
  --bjc-green: #3fb618;
  --bjc-orange: #f0ad4e;
  --bjc-gray-100: #f8f9fa;
  --bjc-gray-200: #e9ecef;
  --bjc-gray-300: #dee2e6;
  --bjc-gray-500: #adb5bd;
  --bjc-gray-600: #6c757d;
  --bjc-gray-700: #495057;
  --bjc-gray-800: #343a40;
  --bjc-gray-900: #212529;

  /* -- page ----------------------------------------------------------------- */

  --bjc-primary: var(--bjc-red);
  --bjc-success: var(--bjc-green);
  /* Cosmo's "danger" is this orange, not a red: the quiz's wrong-answer
     header and the Checkpoint button (btn-danger) are both this color. */
  --bjc-danger: var(--bjc-orange);
  --bjc-body-bg: #fff;
  --bjc-body-color: var(--bjc-gray-800);
  --bjc-muted: var(--bjc-gray-600);
  --bjc-caption-color: hsl(210, 10%, 48%);
  --bjc-border: var(--bjc-gray-300);
  --bjc-border-translucent: rgba(0, 0, 0, 0.175);
  --bjc-link: var(--bjc-primary);
  --bjc-link-hover: rgb(204, 0, 46);
  --bjc-code-color: #8b008b; /* bjc.scss's inline-code purple */
  --bjc-code-bg: var(--bjc-gray-100);
  --bjc-inline-code-bg: rgba(233, 236, 239, 0.65); /* code in running text (p/li/td) */
  --bjc-pre-color: #000;
  --bjc-var-color: #f3761d; /* <var>: the orange "number of squares" input names */
  --bjc-kbd-color: var(--bjc-gray-800);
  --bjc-kbd-bg: var(--bjc-gray-100);
  --bjc-mark-bg: rgb(255, 227, 209);
  --bjc-blockquote-border: var(--bjc-gray-200);
  --bjc-control-bg: var(--bjc-body-bg); /* form controls (the quiz radios) */

  /* -- chrome --------------------------------------------------------------- */

  --bjc-navbar-height: 64px; /* the sticky header's natural height; the sidebar pins under it */
  --bjc-navbar-bg: var(--bjc-primary);
  --bjc-navbar-color: rgb(255, 252, 253);
  --bjc-navbar-hover: rgba(255, 252, 253, 0.8);
  --bjc-dropdown-bg: #fff;
  --bjc-dropdown-color: var(--bjc-gray-800);
  --bjc-dropdown-border: var(--bjc-border-translucent);
  --bjc-dropdown-hover-bg: var(--bjc-gray-100);
  --bjc-dropdown-hover-color: var(--bjc-gray-800);
  --bjc-sidebar-color: hsl(0, 0%, 35%);
  --bjc-sidebar-hover: rgba(181, 0, 40, 0.8);
  --bjc-sidebar-active: rgb(181, 0, 40);
  --bjc-sidebar-border: var(--bjc-border);
  --bjc-toc-rule: var(--bjc-gray-200); /* the "On this page" list's left hairline */
  --bjc-toc-active: var(--bjc-primary);
  --bjc-secondary-nav-bg: #fff;
  --bjc-secondary-nav-color: hsl(0, 0%, 35%);
  --bjc-secondary-nav-divider: hsl(0, 0%, 55%);
  --bjc-breadcrumb-divider: rgba(52, 58, 64, 0.75);
  --bjc-footer-bg: #fff;
  --bjc-footer-color: hsl(0, 0%, 46%);
  --bjc-glass: hsla(0, 0%, 40%, 0.4); /* the dimmer behind the mobile sidebar drawer */

  /* -- content boxes (bjc.scss's element colors) --------------------------- */

  --bjc-for-you-to-do: #62c213;
  --bjc-dialogue: #0494dc;
  --bjc-if-time: #4a6cd4;
  --bjc-if-time-bg: #cce4f6;
  --bjc-take-it: #8f56e3;
  --bjc-take-it-bg: #e4cde3;
  --bjc-learn-bg: #fcc7c2;
  --bjc-sidenote: #e6a822;
  --bjc-sidenote-bg: #fff8ad;
  --bjc-atwork-bg: #fcc589;
  --bjc-define-bg: #eaeaea; /* vocab / exam boxes */
  --bjc-note: #f3761d; /* takeNote's thick border */
  --bjc-highlight-bg: #fff3cd;
  --bjc-highlight-border: #f0ad4e;
  --bjc-truth-bg: #fff;
  --bjc-truth-border: #000;
  --bjc-hoverinfo-color: #000;
  --bjc-hoverinfo-bg: rgba(255, 255, 255, 0.95);
  --bjc-saveas-color: #333; /* composited onto the (light) save-this-as screenshot in both themes */

  /* -- quiz cards (the llab multiple-choice runtime) ------------------------ */

  --bjc-card-bg: #fff;
  --bjc-card-border: var(--bjc-border-translucent);
  --bjc-card-cap-bg: rgba(52, 58, 64, 0.25);
  --bjc-list-group-bg: #fff;
  --bjc-list-group-border: var(--bjc-gray-300);
  --bjc-btn-primary-hover: rgb(217, 0, 48);
  --bjc-btn-primary-border-hover: rgb(204, 0, 46);
  --bjc-btn-danger-hover: rgb(242, 185, 105);
  --bjc-btn-danger-border-hover: rgb(242, 181, 96);
  --bjc-feedback-rule: grey;
}

/* -- dark ------------------------------------------------------------------- */

/* The values bjc-dark.scss compiled, plus the dark fixes the old book.css
   carried for rules the frozen theme had baked light-only. */
html[data-theme="dark"] {
  color-scheme: dark;

  --bjc-body-bg: var(--bjc-gray-900);
  --bjc-body-color: #fff;
  --bjc-caption-color: hsl(0, 0%, 75%);
  --bjc-border: var(--bjc-gray-700);
  --bjc-link: var(--bjc-teal);
  --bjc-link-hover: rgb(26, 161, 121);
  --bjc-code-bg: #000;
  --bjc-inline-code-bg: #000;
  --bjc-pre-color: inherit;
  --bjc-kbd-color: #fff;
  --bjc-kbd-bg: rgb(74, 75, 75);

  --bjc-navbar-hover: rgba(253, 254, 254, 0.8);
  --bjc-dropdown-bg: var(--bjc-gray-900);
  --bjc-dropdown-color: #fff;
  --bjc-dropdown-border: var(--bjc-gray-700);
  --bjc-dropdown-hover-bg: var(--bjc-primary);
  --bjc-dropdown-hover-color: #fff;
  --bjc-sidebar-color: rgb(175, 177, 178);
  --bjc-sidebar-hover: rgba(32, 201, 151, 0.8);
  --bjc-sidebar-active: var(--bjc-teal);
  --bjc-toc-active: var(--bjc-teal);
  --bjc-secondary-nav-bg: var(--bjc-gray-900);
  --bjc-secondary-nav-color: rgb(175, 177, 178);
  --bjc-secondary-nav-divider: hsl(210, 2%, 49%);
  --bjc-breadcrumb-divider: rgba(255, 255, 255, 0.75);
  --bjc-footer-bg: var(--bjc-gray-900);
  --bjc-footer-color: rgb(137, 139, 142);

  --bjc-if-time: #2f61f8;
  --bjc-if-time-bg: #005fa8;
  --bjc-take-it: #6f11fc;
  --bjc-take-it-bg: #913d8a;
  --bjc-learn-bg: #a31508;
  --bjc-sidenote-bg: #6b6a00;
  --bjc-atwork-bg: #6e461e;
  --bjc-define-bg: #6a6a6a;
  --bjc-highlight-bg: #3d3313;
  --bjc-highlight-border: #8a6a12;
  --bjc-truth-bg: #1e1e24;
  --bjc-truth-border: #9a9aa6;
  --bjc-hoverinfo-color: #e6e6ea;
  --bjc-hoverinfo-bg: rgba(30, 30, 36, 0.95);

  --bjc-card-bg: var(--bjc-gray-800);
  --bjc-card-cap-bg: var(--bjc-gray-700);
  --bjc-list-group-bg: var(--bjc-gray-800);
  --bjc-list-group-border: var(--bjc-gray-700);
}