/* Single visual of the whole system (T-163): admin, staff screens and portal read these
 * variables and define no colors of their own. Reference: docs/design/reference-form-layout.png.
 * No external font or CDN: system font stack; icons are the Material Symbols Unfold ships. */
:root {
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --page-bg: #f4f7fb;
  --card-bg: #ffffff;
  --card-radius: 14px;
  --card-shadow: 0 1px 2px rgba(15, 40, 90, .06), 0 6px 18px rgba(15, 40, 90, .08);
  --text: #16233b;
  --text-muted: #5a6b88;
  --line: #dbe4f3;

  --primary: #2563eb;
  --primary-strong: #1d4fd0;
  --primary-soft: #dbe7ff;
  --danger: #c62828;
  --success: #1e7d3c;

  --menu-top: #0b2a5b;
  --menu-bottom: #0a1f44;
  --menu-text: #ffffff;
  --menu-muted: #9db6e0;
  --menu-active: #1f6bff;
  --menu-open: rgba(255, 255, 255, .14);
  --dropdown-hover: #eef4ff;

  --field-bg: #eef4ff;
  --field-border: #c7d7f5;
  --field-radius: 10px;
  --field-height: 46px;
  --field-font-size: 1rem;
  --field-border-width: 1.5px;
  --label-size: .8rem;
  --band-title-size: 1.3rem;
  --menu-item-size: .95rem;
  --menu-group-size: .8rem;
  --menu-item-height: 2.5rem;
  --menu-icon-size: 22px;
  --check-size: 1.25rem;

  --band-blue: #c6dbff;
  --band-green: #c8ecce;
  --band-lilac: #dcd5f8;
  --band-orange: #fbd9bd;
  --band-red: #f8c8c8;
  --band-text: #14284d;

  /* Status badges (T-196): soft background, strong text. */
  --badge-ok-bg: #d9f2de;  --badge-ok-text: #17612f;
  --badge-bad-bg: #fbdcdc; --badge-bad-text: #8a1c1c;
  --badge-warn-bg: #fdf0c4; --badge-warn-text: #6b4e00;
  --badge-mute-bg: #e8edf5; --badge-mute-text: #4a5a78;
  --table-head-bg: #eef4ff; --table-zebra: #f8fafe;
}