/* ============================================================
   colors.css
   Central color palette for the entire application.

   HOW TO USE:
     - Import this file in index.html BEFORE style.css:
         <link rel="stylesheet" href="colors.css" />
         <link rel="stylesheet" href="style.css" />
     - Reference any color in style.css using:
         color: var(--color-primary);

   All colors are defined as CSS Custom Properties on :root,
   which makes them globally available across all stylesheets.
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     PRIMARY COLOR
     Used for: header background, active buttons, accents,
     table section titles
     ---------------------------------------------------------- */
  --color-primary: #0086bb;

  /* ----------------------------------------------------------
     PRIMARY COLOR — light variant
     Used for: row hover background in tables
     ---------------------------------------------------------- */
  --color-mouse-blue: #d0fcf4;

  /* ----------------------------------------------------------
     DARK COLORS — used for table headers and text
     ---------------------------------------------------------- */

  /* Main table header background */
  --color-header-dark: #1a1a1a;

  /* Sub-row header background (slightly lighter than main header) */
  --color-header-mid: #222222;

  /* Default body text color */
  --color-text: #1a1a1a;

  /* Placeholder / muted text color (empty screens, table data) */
  --color-text-table: #0d0138;


  /* ----------------------------------------------------------
     NEUTRAL / BACKGROUND COLORS
     ---------------------------------------------------------- */

  /* Page background */
  --color-bg-page: #f4f4f4;

  /* Card / surface background (nav bar, tables) */
  --color-bg-surface: #ffffff;

  /* Alternating row background (zebra striping) */
  --color-bg-row-alt: #fafafa;


  /* ----------------------------------------------------------
     BORDER COLORS
     ---------------------------------------------------------- */

  /* Border between nav bar and content */
  --color-border-nav: #e0e0e0;

  /* Border between table cells in tbody */
  --color-border-cell: #dddddd;

  /* Border between table header cells */
  --color-border-header: #333333;


  /* ----------------------------------------------------------
     TEXT ON COLORED BACKGROUNDS
     ---------------------------------------------------------- */

  /* Text color used on dark backgrounds (header, buttons) */
  --color-text-on-dark: #ffffff;

  /* ----------------------------------------------------------
     MATRIX COLORS
     ---------------------------------------------------------- */

  --color-matrix-bad: #fcb9b9;

  --color-matrix-ok: #f9fab1;

  --color-matrix-matched: #c3f7cb;
}