/*
 * Theme tokens (plans/dark-mode.md) — the one vocabulary every stylesheet
 * maps its colors onto. Light values reproduce the site's historical
 * colors; the dark palette lives in the single :root[data-theme="dark"]
 * block below. Rules:
 *
 * - CSS keys ONLY off the resolved data-theme attribute the boot script
 *   (theme-boot.js) stamps before first paint — never off
 *   prefers-color-scheme — so the toggle always wins and there is one
 *   mechanism to reason about.
 *
 * - No color literal outside a token block. A page-specific color that
 *   doesn't fit this vocabulary gets a LOCAL pair at the top of its own
 *   stylesheet: light under `:root {}`, dark under
 *   `@media not print { :root[data-theme="dark"] {} }`.
 *
 * - Dark token blocks always live inside `@media not print` so printing
 *   gets the light palette everywhere (seating charts, grids, and
 *   policies get printed) without repeating the light values.
 *
 * Imported by base.css (so every site page family inherits it) and by the
 * gradebook's app.css (which doesn't import base.css).
 */

:root {
  color-scheme: light;

  /* Surfaces */
  --bg: #eeeef5; /* the content card (the old --page-background) */
  --bg-elevated: #fff; /* tables, cards, inputs, panels */
  --bg-muted: #eee; /* zebra rows, disabled, subtle fills */
  --backdrop: radial-gradient(
    circle,
    rgb(85, 68, 102) 0%,
    rgba(2, 0, 36, 1) 35%,
    rgba(9, 9, 121, 1) 100%
  ); /* the page.css gradient — deliberately the same in dark */

  /* Text */
  --text: #000;
  --text-muted: #555;
  --text-faint: #999;
  --link: #0000ee;

  /* Lines */
  --border-soft: #ddd;
  --border: #ccc;
  --border-strong: #666;

  /* Accent — the site's purple family */
  --accent: rgb(196, 128, 196);
  --accent-tint: rgba(196, 128, 196, 0.1);
  --accent-strong: rgba(196, 128, 196, 0.7);

  /* Status pairs: a -bg to fill with and a -fg readable on it (and on --bg) */
  --ok-bg: #d4edda;
  --ok-fg: #155724;
  --warn-bg: #fff3cd;
  --warn-fg: #856404;
  --warn-border: #e6d77a;
  --error-bg: #f8d7da;
  --error-fg: #721c24;
  --info-bg: #d9edf7;
  --info-fg: #31708f;
  --info-border: #9cc3d5;
  --neutral-bg: #e8e8e8;
  --neutral-fg: #555;

  /* Vivid inline accents (status words, icons) — the historical keywords */
  --danger: red;
  --success: green;
  --action: blue;

  /* Code */
  --code-bg: #f5f2f0; /* Prism's stock light background */
  --code-fg: #000;
  --editor-bg: #fffffe; /* Monaco vs / the REPL panes */

  /* Computed tints: TS builds hsl() colors around these (seat groups in
     seating-panel.ts / room-editor.ts), so the hue stays per-group while
     the lightness follows the theme. */
  --seat-tint-lightness: 88%;
  --seat-tint-border-lightness: 50%;

  /* Buttons (site chrome: toolbar, login flow) */
  --button-bg: #000;
  --button-fg: #fff;
  --button-border: #000;
}

@media not print {
  :root[data-theme='dark'] {
    color-scheme: dark;
    /* The canvas behind the tool/editor pages (page.css's gradient paints
       over this on the content pages). */
    background-color: #131318;

    --bg: #1b1b22;
    --bg-elevated: #26262f;
    --bg-muted: #2c2c35;

    --text: #e6e6ea;
    --text-muted: #a9a9b3;
    --text-faint: #7b7b85;
    --link: #8cb4ff;

    --border-soft: #33333d;
    --border: #3d3d49;
    --border-strong: #6a6a76;

    --accent: rgb(196, 128, 196);
    --accent-tint: rgba(196, 128, 196, 0.16);
    --accent-strong: rgba(196, 128, 196, 0.55);

    --ok-bg: #1c3a25;
    --ok-fg: #8fd39c;
    --warn-bg: #3d3313;
    --warn-fg: #e2c464;
    --warn-border: #5c4d1e;
    --error-bg: #46201d;
    --error-fg: #f0968c;
    --info-bg: #1c3542;
    --info-fg: #9ed0eb;
    --info-border: #2f5468;
    --neutral-bg: #2c2c34;
    --neutral-fg: #b0b0ba;

    --danger: #ff6f61;
    --success: #57c765;
    --action: #7aa2ff;

    --code-bg: #141414; /* BHSawesome's dark code background */
    --code-fg: #fff;
    --editor-bg: #1e1e1e; /* Monaco vs-dark */

    --seat-tint-lightness: 30%;
    --seat-tint-border-lightness: 55%;

    --button-bg: #3a3a46;
    --button-fg: #fff;
    --button-border: #4a4a56;
  }
}