/* =====================================================================
   colors.css — single source of truth for the site palette.
   Edit the values in :root below to re-theme the whole site at once.
   Loaded after the W3.CSS sheets so the nav overrides win.
   ===================================================================== */
:root{
  /* ---- main accent (links, highlights, markers, active card, buttons) ---- */
  --accent:          #CC2369;
  --accent-rgb:      204, 35, 105;   /* same colour as an R,G,B triplet (drives subtle tints) */

  /* ---- backgrounds & text ---- */
  --paper:           #f7d3bc;        /* main content-page background */
  --ink:             #023f54;        /* main body text */
  --muted:           #6b655d;        /* secondary text */
  --muted-soft:      #9a9183;        /* tertiary text */
  --rule:            rgba(0,0,0,.08);
  --surface:         #f7d3bc;        /* form/card surface */
  --field-bg:        #f7bf9b; /* keep light-mode form fields tied to surface */
  --field-border:    rgba(0,0,0,.2);

  /* ---- navigation bar ---- */
  --navbar-bg:       var(--paper);   /* nav bar background */
  --navbar-btn:      var(--accent);  /* active nav tab background */
  --navbar-btn-text: #FFFFFF;        /* active nav tab text */
  /* Navbar chrome colors are centralized here so mobile/menu separators can be re-themed. */
  --navbar-separator:        #CC2369;        /* horizontal line below top nav */
  --navbar-menu-button-bg:   var(--navbar-btn); /* mobile hamburger background */
  --navbar-menu-button-text: var(--navbar-btn-text);
}

/* Dark mode inverts the site palette through the same variables used by each page. */
html.dark-mode{
  --accent:          #f73277;
  --accent-rgb:      255, 143, 182;

  --paper:           #202323;
  --ink:             #f7d3bc;
  --muted:           #d8bca9;
  --muted-soft:      #b89783;
  --rule:            rgba(247,211,188,.18);
  --surface:         #123746;
  --field-bg:        #0c2d3b;
  --field-border:    rgba(247,211,188,.34);

  --navbar-bg:       var(--paper);
  --navbar-btn:      var(--accent);
  --navbar-btn-text: #082633;
  --navbar-separator:        var(--accent);
  --navbar-menu-button-bg:   var(--navbar-btn);
  --navbar-menu-button-text: var(--navbar-btn-text);
}

/* nav bar background (overrides W3.CSS .w3-white inside the nav only) */
.w3-top .w3-bar,
.w3-top #navDemo{ background-color:var(--navbar-bg) !important; }

/* active nav tab (overrides W3.CSS .w3-orange) */
.w3-top .w3-orange{
  background-color:var(--navbar-btn) !important;
  color:var(--navbar-btn-text) !important;
}