/*
  nexhaul-theme.css
  Light mode — white background, navy brand accent
  Brand: #001b3d (navy), #BDBDBD (grey), #FFFFFF (white)

  Usage: add to every HTML page after Google Fonts link:
    <link rel="stylesheet" href="/nexhaul-theme.css"/>
*/

:root {
  /* ── Backgrounds ──────────────────────────────── */
  --bg:       #ffffff;   /* page background              */
  --surface:  #f4f6f9;   /* card / panel background      */
  --surface2: #eaecf2;   /* elevated / hover surface     */

  /* ── Borders ──────────────────────────────────── */
  --border:   #dde2ed;   /* default border               */
  --border2:  #c8d0e0;   /* stronger border              */

  /* ── Brand Accents ────────────────────────────── */
  --accent:   #001b3d;   /* brand navy — primary CTA     */
  --accent2:  #2a6af5;   /* bright blue — secondary      */
  --accent3:  #6c8ebf;   /* muted blue — tertiary        */

  /* ── Semantic Colors ──────────────────────────── */
  --warn:     #d97706;   /* amber (darkened for contrast) */
  --danger:   #dc2626;   /* red                          */

  /* ── Text ─────────────────────────────────────── */
  --text:     #0f1923;   /* near-black primary text      */
  --text2:    #4a5568;   /* secondary / muted text       */
  --text3:    #9aa3b0;   /* dim / disabled text          */

  /* ── Brand Reference ──────────────────────────── */
  --brand-navy:  #001b3d;
  --brand-grey:  #bdbdbd;
  --brand-white: #ffffff;

  /* ── Fonts ────────────────────────────────────── */
  --mono: 'IBM Plex Mono', monospace;
  --sans: 'Syne', sans-serif;
}

/* ── Base overrides for light mode ────────────────────────────── */
body {
  background: var(--bg);
  color: var(--text);
}

/* ── Scrollbar ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

/* ── Selection ─────────────────────────────────────────────────── */
::selection { background: rgba(0, 27, 61, 0.12); color: var(--text); }

/* ── Input fields ──────────────────────────────────────────────── */
input, select, textarea {
  color: var(--text);
  background: var(--bg);
}
input::placeholder { color: var(--text3); }

/* ── Chart.js canvas — force light tick/grid colors ───────────── */
/* (Chart.js defaults are set in JS, this is a fallback hint) */
canvas { color: var(--text2); }