/* Workspace color tokens and original school accents. Keep the plain light
 * fallback paired with the light-dark() values below; workspace_palettes.css
 * supplies the full school palettes. */
.workspace {
  --ink: #111827;
  --muted: #4b5563;
  --surface: #ffffff;
  --canvas: #f7f8f9;
  --line: #e3e5e8;
  --border: #767a7d;
  --action: #4d566b;
  --action-hover: #373b3d;
  --focus: #656c7a;
  --error: #9b1c31;
  --sidebar-muted: #b8c0cc;
  --drawer: #18202b;
  --parent-panel: #ffffff;
  --selected: #dcebef;
  --on-action: #ffffff;
  --row-hover: #f0f2f5;
  --table-heading: #4b5563;
  --success-line: #329a6b;
  --success-surface: #e6fff3;
  --backdrop: rgb(255 255 255 / 50%);
  --panel-edge: transparent;
  --scroll-shadow: rgb(0 0 0 / 10%);
  --logo-plate: transparent;
}

/* Original school accent colors (School::ACCENT_COLORS), chosen in School settings. The
 * layout puts the school's color on body, and each settings swatch carries its
 * own. A color replaces only the button and link color; text, error, success
 * and focus colors stay fixed so a school color cannot be mistaken for them.
 * The hover color mixes in --ink, so it lies between two colors that both pass
 * and keeps at least the lower of their contrasts. Light
 * shades are here; their dark pairs are in the @supports block below. Slate
 * repeats the default --action. Contrast: docs/runbooks/accessibility.md#color-themes.
 */
.workspace[data-theme-color]:where(:not([data-theme-color="slate"])) { --action-hover: color-mix(in oklab, var(--action) 60%, var(--ink)); }
.workspace[data-theme-color="slate"], .workspace [data-theme-color="slate"] { --action: #4d566b; }
.workspace[data-theme-color="charcoal"], .workspace [data-theme-color="charcoal"] { --action: #1c2026; }
.workspace[data-theme-color="navy"], .workspace [data-theme-color="navy"] { --action: #2f3f66; }
.workspace[data-theme-color="royal_blue"], .workspace [data-theme-color="royal_blue"] { --action: #1856ba; }
.workspace[data-theme-color="teal"], .workspace [data-theme-color="teal"] { --action: #015751; }
.workspace[data-theme-color="forest_green"], .workspace [data-theme-color="forest_green"] { --action: #29470f; }
.workspace[data-theme-color="kelly_green"], .workspace [data-theme-color="kelly_green"] { --action: #467600; }
.workspace[data-theme-color="gold"], .workspace [data-theme-color="gold"] { --action: #746019; }
.workspace[data-theme-color="orange"], .workspace [data-theme-color="orange"] { --action: #a04f00; }
.workspace[data-theme-color="maroon"], .workspace [data-theme-color="maroon"] { --action: #6f1822; }
.workspace[data-theme-color="pink"], .workspace [data-theme-color="pink"] { --action: #a2288d; }
.workspace[data-theme-color="purple"], .workspace [data-theme-color="purple"] { --action: #8c48c5; }
.workspace[data-theme-color="brown"], .workspace [data-theme-color="brown"] { --action: #6f452b; }

/* Dark theme, in browsers with light-dark() (Chrome 123, Safari 17.5 and
 * Firefox 120 or later). Each token pairs its light value above with a dark
 * value; keep the two light values the same (WorkspacePaletteTest checks).
 * Signed-out pages follow the device. A signed-in user's saved theme is on body
 * as data-color-scheme: system, light or dark. Setting it on the root element
 * lets the page scrollbar match. Older browsers that allow_browser accepts skip
 * this block, keep the light palette and hide the theme toggle. Contrast pairs:
 * docs/runbooks/accessibility.md#color-themes.
 */
@supports (color: light-dark(#000, #fff)) {
  :root:has(> .workspace) { color-scheme: light dark; }
  :root:has(> .workspace[data-color-scheme="light"]) { color-scheme: light; }
  :root:has(> .workspace[data-color-scheme="dark"]) { color-scheme: dark; }

  .workspace {
    --ink: light-dark(#111827, #cbd2dc);
    --muted: light-dark(#4b5563, #aeb8c8);
    --surface: light-dark(#ffffff, #1a1e27);
    --canvas: light-dark(#f7f8f9, #111318);
    --line: light-dark(#e3e5e8, #2a303c);
    --border: light-dark(#767a7d, #8b9296);
    --action: light-dark(#4d566b, #a8b8dc);
    --action-hover: light-dark(#373b3d, #cdd8ef);
    --focus: light-dark(#656c7a, #cbd2dc);
    --error: light-dark(#9b1c31, #ff8f9c);
    --sidebar-muted: light-dark(#b8c0cc, #aeb8c8);
    --drawer: light-dark(#18202b, #0c1017);
    --parent-panel: light-dark(#ffffff, #33383d);
    --selected: light-dark(#dcebef, #1f3d47);
    --on-action: light-dark(#ffffff, #111318);
    --row-hover: light-dark(#f0f2f5, #232936);
    --table-heading: light-dark(#4b5563, #aeb8c8);
    --success-line: light-dark(#329a6b, #4cc38a);
    --success-surface: light-dark(#e6fff3, #14291f);
    --backdrop: light-dark(rgb(255 255 255 / 50%), rgb(0 0 0 / 60%));
    --panel-edge: light-dark(transparent, var(--line));
    --scroll-shadow: light-dark(rgb(0 0 0 / 10%), rgb(0 0 0 / 45%));
    --logo-plate: light-dark(transparent, #f7f8f9);
  }

  .workspace[data-theme-color="slate"], .workspace [data-theme-color="slate"] { --action: light-dark(#4d566b, #a8b8dc); }
  .workspace[data-theme-color="charcoal"], .workspace [data-theme-color="charcoal"] { --action: light-dark(#1c2026, #d0d6dc); }
  .workspace[data-theme-color="navy"], .workspace [data-theme-color="navy"] { --action: light-dark(#2f3f66, #8597bf); }
  .workspace[data-theme-color="royal_blue"], .workspace [data-theme-color="royal_blue"] { --action: light-dark(#1856ba, #5a93f2); }
  .workspace[data-theme-color="teal"], .workspace [data-theme-color="teal"] { --action: light-dark(#015751, #279a8f); }
  .workspace[data-theme-color="forest_green"], .workspace [data-theme-color="forest_green"] { --action: light-dark(#29470f, #82a16e); }
  .workspace[data-theme-color="kelly_green"], .workspace [data-theme-color="kelly_green"] { --action: light-dark(#467600, #9cd36d); }
  .workspace[data-theme-color="gold"], .workspace [data-theme-color="gold"] { --action: light-dark(#746019, #d4c185); }
  .workspace[data-theme-color="orange"], .workspace [data-theme-color="orange"] { --action: light-dark(#a04f00, #ff8f39); }
  .workspace[data-theme-color="maroon"], .workspace [data-theme-color="maroon"] { --action: light-dark(#6f1822, #c87273); }
  .workspace[data-theme-color="pink"], .workspace [data-theme-color="pink"] { --action: light-dark(#a2288d, #df71c7); }
  .workspace[data-theme-color="purple"], .workspace [data-theme-color="purple"] { --action: light-dark(#8c48c5, #d1a7fe); }
  .workspace[data-theme-color="brown"], .workspace [data-theme-color="brown"] { --action: light-dark(#6f452b, #cb9f86); }

  @media print {
    :root:has(> .workspace), :root:has(> .workspace[data-color-scheme]) { color-scheme: light; }
  }
}