/* Design tokens: bundled fonts, light palette, dark overrides (:root.theme-dark), z-index scale. */
@font-face {
  font-family: "Chicago";
  src: url("../assets/fonts/ChicagoFLF.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  /* block, not swap: the 13 KB font is self-hosted, and swap would flash the UI in the fallback. */
  font-display: block;
}

:root {
  --platinum:           #DDDDDD;
  --platinum-shadow:    #888888;
  --platinum-highlight: #FFFFFF;
  --platinum-mid:       #AAAAAA;
  --titlebar-stripe-fg: #000000;
  --titlebar-stripe-bg: #FFFFFF;
  --text:               #000000;
  /* Dim text sits on --platinum (toolbar) as well as white; this keeps both >= 4.5:1 (WCAG AA). */
  --text-dim:           #5C5C5C;
  --link:               #0000B5;

  --window-body-bg:     #FFFFFF;
  --surface-subtle:     #FAFAFA;
  --surface-strong:     #FFFFFF;
  --border-strong:      #000000;

  --font-chicago: "Chicago", system-ui, sans-serif;
  --font-serif:   Charter, "Iowan Old Style", Georgia, "Times New Roman", serif;
  /* Sans/serif pairing: Chicago for titles, headings and UI labels; --font-serif for body text. */
  --font-heading: var(--font-chicago);
  --font-system:  var(--font-chicago);

  /* Page-wide stacking order, lowest first. */
  --z-toolbar:  5;
  --z-sidebar: 20;
  --z-tooltip: 30;
  --z-modal:  100;
}

/* Applied by theme.js toggling the theme-dark class on <html>. */
:root.theme-dark {
  --platinum:           #2D2E33;
  --platinum-shadow:    #1A1B1F;
  --platinum-highlight: #45474C;
  --platinum-mid:       #383A3F;
  --titlebar-stripe-fg: #1A1B1F;
  --titlebar-stripe-bg: #6B6E74;
  --text:               #E8E8E8;
  --text-dim:           #999B9F;
  --link:               #7AC8FF;

  --window-body-bg:     #1B1D21;
  --surface-subtle:     #24262B;
  --surface-strong:     #2D2E33;
  --border-strong:      #0A0A0C;
}