/* חוק פלוס – every color of the extension, in one place.
 *
 * This file is the only place a color value may be written. Pages and components use only
 * var(--token). To change the app's colors, edit the values here; the names say what a color is
 * for (its role), not its hue, so a palette change never needs a rename.
 *
 * Loaded by: sidepanel.html, print.html, cases-print.html, picker.html, fab/fab.html (first,
 * before their own CSS), the page button's shadow root in content/content.js (a <link> to the
 * extension's copy, listed in web_accessible_resources), and the website through a byte-identical
 * copy at server/hosting/assets/colors.css (written by `node tools/sync-theme.mjs` and by the
 * hosting predeploy hook in server/firebase.json - never edit the copy).
 * Colors JS needs as values (the toolbar badge, the card on the Gemini page) are read from here
 * with getComputedStyle(document.documentElement).getPropertyValue('--…').
 *
 * Not covered: the e-mail templates (mail clients ignore CSS variables), the PNG icons, the store
 * images and the help pictures in sidepanel/guide/*.svg. Guard: tools/test/theme.test.mjs.
 *
 * :host makes the tokens work inside a shadow root too (the page button).
 */
:root,
:host {
  /* Surfaces */
  --surface-page: #f6f5f1; /* the panel's background ("paper") */
  --surface: #ffffff; /* cards, header, tab bar, sheets */
  --surface-subtle: #fbfaf7; /* group headers inside a card */
  --surface-hover: #f8f7f3; /* a row under the pointer */
  --surface-press: #f2f4f7; /* a secondary button under the pointer */
  --surface-sunken: #eceae4; /* segmented control, progress track, icon button under the pointer */
  --surface-neutral: #efede7; /* the court site bar when the site is not open */
  --surface-folder: #f1efe9; /* a folder's icon box */
  --surface-inverse: #18212f; /* the toast */

  /* Text */
  --text: #18212f;
  --text-2: #3d4654;
  --text-3: #4a5463;
  --text-muted: #5f6673;
  --text-folder: #5a4a2a; /* a folder's icon */
  --text-on-accent: #ffffff; /* text and icons on --accent */
  --text-on-inverse: #ffffff;

  /* Lines */
  --line: #e5e2da; /* card borders, header and tab bar edges */
  --line-soft: #efece6; /* between rows */
  --line-strong: #d9d6ce; /* fields, chips, the sheet's handle */
  --line-option: #e0ddd5; /* an option card */
  --line-button: #d3d8e0; /* a secondary button */
  --line-hover: #b9bfca; /* a chip under the pointer */
  --line-control: #b7bdc7; /* radio and check boxes */
  --control-off: #cbcfd6; /* a switch that is off */

  /* Accent (the brand's navy) */
  --accent: #1f3556; /* main buttons, active tab, links, focus ring */
  --accent-hover: #172a45;
  --accent-soft: #e6ecf5; /* "new" badges, selected fills */
  --accent-tint: #f3f6fa; /* the license tag, a chosen option, highlighted cards */
  --accent-bar: #eaf0f7; /* the court site bar on a case */
  --accent-info: #eef2f7; /* info boxes */
  --accent-line: #d6dfea; /* borders of accent-tinted cards and the license tag */
  --accent-ring: rgba(31, 53, 86, 0.12); /* the glow around a focused field */

  /* Status: ok (green), warn (amber), bad (red) */
  --ok: #2d6a4a;
  --ok-soft: #e7f2ec;
  --ok-dot: #3e8e63;
  --warn: #7a4a06;
  --warn-soft: #fbf1dc;
  --warn-line: #f0ddb0;
  --warn-dot: #c98a1b;
  --bad: #9b2c2c;
  --bad-soft: #fbeaea;
  --bad-line: #edc6c6;
  --idle-dot: #9aa1ac; /* the court site bar's dot when the site is not open */

  /* Document types (the case's documents list) */
  --doc-protocol: #1d6461;
  --doc-exhibit: #6a4c93;

  /* Favorites */
  --star: #e9c46a;
  --star-line: #a9741c;

  /* Overlays and shadows */
  --backdrop: rgba(24, 33, 47, 0.38); /* behind a sheet */
  --shade-1: rgba(24, 33, 47, 0.06);
  --shade-2: rgba(24, 33, 47, 0.12);
  --shade-3: rgba(24, 33, 47, 0.25);
  --shadow-sheet: 0 -8px 30px rgba(24, 33, 47, 0.18);
  --shadow-toast: 0 6px 20px rgba(24, 33, 47, 0.25);
  --veil-2: rgba(255, 255, 255, 0.3);
}