/* ==========================================================================
   theme.css — YOUR FILE. Tune the map's look here.

   This loads AFTER styles.css, so anything set here wins. Keeping changes in
   this file rather than editing styles.css means the stylesheet can be
   updated without clobbering your palette.

   It is bind-mounted into the nginx container, so: edit, save, reload the
   browser. No rebuild, no restart, no build step at all.

   HOW COLOURS WORK
   ----------------
   Accents are declared as raw "R G B" channel triplets, not hex. Every
   border, glow, gradient, map edge and node icon derives its own transparency
   from those channels, so changing one line here recolours the whole app.

     --accent-rgb: 255 138 0;   <- correct   (space separated, no commas)
     --accent-rgb: #ff8a00;     <- WRONG, breaks every derived colour

   Need a hex value? Convert it: #ff8a00 -> 255 138 0.

   The canvas map reads these same variables at load (see lib/map.js), so the
   nodes and edges recolour along with the CSS.
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     ACTIVE THEME — uncomment a preset below, or just edit these five.
     ---------------------------------------------------------------------- */
  --accent-rgb:     243 230 0;
  --accent-alt-rgb: 197 0 60;
  --warn-rgb:       243 163 0;
  --ok-rgb:         85 234 212;
  --alert-rgb:      255 42 90;
  --text-primary:   #fdf6d8;
  --text-dim:       #8f8a5e;
  --bg-void:        #000000;
  --bg-panel:       rgba(136, 4, 37, 0.26);
  --bg-panel-solid: #1a0308;

  /* --accent-rgb:     0 255 245; */   /* infrastructure: router, APs      */
  /* --accent-alt-rgb: 255 43 214; */  /* smart home: speakers, TVs, IoT   */
  /* --warn-rgb:       255 183 0;  */  /* personal: phones, laptops        */
  /* --ok-rgb:         57 255 136; */  /* servers, NAS, hypervisors        */
  /* --alert-rgb:      255 59 92;  */  /* errors                           */

  /* Surfaces and text --------------------------------------------------- */
  /* --bg-void:       #05070c; */
  /* --bg-panel:      rgba(10, 18, 28, 0.55); */
  /* --bg-panel-solid:#0a1220; */
  /* --text-primary:  #d9fbff; */
  /* --text-dim:      #6f97a3; */

  /* Effects ------------------------------------------------------------- */
  /* --scanline-opacity: 0.18;  */     /* CRT scanlines: 0 disables them   */
  /* --noise-opacity:    0.035; */     /* film grain: 0 disables it        */

  /* Map geometry -------------------------------------------------------- */
  /* The middle is a filled disc holding all the infrastructure (router, APs,
     switches); around it is a pie of client devices grouped by category,
     sized in proportion to how many devices each group holds. Connection
     lines cross the disc to the specific box a device goes through.

     --map-core is the disc's radius as a fraction of the map's usable
     radius. --map-node is the icon size in px and also drives the row
     spacing in the ring — shrink it if you have a lot of devices.          */
  /* --map-core: 0.28; */
  /* --map-node: 26;   */
}

/* ==========================================================================
   PRESETS — uncomment ONE block to switch the whole map over.
   ========================================================================== */

/* --- URGENT: orange + green. Reads well under warm ambient light. ---------
:root {
  --accent-rgb:     255 138 0;
  --accent-alt-rgb: 57 255 136;
  --warn-rgb:       255 210 0;
  --ok-rgb:         57 255 136;
  --alert-rgb:      255 59 92;
  --text-primary:   #ffeedd;
  --text-dim:       #a3846f;
  --bg-void:        #0c0703;
  --bg-panel:       rgba(28, 18, 10, 0.55);
  --bg-panel-solid: #1a1006;
}
*/

/* --- TOXIC: acid green terminal. -----------------------------------------
:root {
  --accent-rgb:     57 255 136;
  --accent-alt-rgb: 200 255 0;
  --warn-rgb:       255 210 0;
  --ok-rgb:         57 255 136;
  --alert-rgb:      255 59 92;
  --text-primary:   #d9ffe4;
  --text-dim:       #6fa385;
  --bg-void:        #030c06;
  --bg-panel:       rgba(10, 28, 18, 0.55);
  --bg-panel-solid: #061a10;
}
*/

/* --- ICE: cold blue + violet, low glare for a dark room. -----------------
:root {
  --accent-rgb:     80 170 255;
  --accent-alt-rgb: 150 120 255;
  --warn-rgb:       255 200 90;
  --ok-rgb:         90 230 190;
  --alert-rgb:      255 90 120;
  --text-primary:   #e2f0ff;
  --text-dim:       #7d93ab;
  --bg-void:        #04070d;
  --bg-panel:       rgba(12, 20, 34, 0.55);
  --bg-panel-solid: #0a1424;
}
*/

/* --- AMBER CRT: single-colour vintage terminal. --------------------------
:root {
  --accent-rgb:     255 176 0;
  --accent-alt-rgb: 255 120 0;
  --warn-rgb:       255 220 100;
  --ok-rgb:         255 176 0;
  --alert-rgb:      255 70 40;
  --text-primary:   #ffd899;
  --text-dim:       #99764a;
  --bg-void:        #0a0600;
  --bg-panel:       rgba(30, 20, 4, 0.55);
  --bg-panel-solid: #1a1200;
  --scanline-opacity: 0.28;
}
*/

/* --- CYBERPUNK 2077: yellow + turquoise on true black. -------------------
   Source palette: #f3e600 yellow, #55ead4 turquoise, #c5003c crimson,
   #880425 oxblood, #000000 black.

   Measured contrast on #000000 (WCAG 2.1):
     yellow     16.1:1     turquoise  14.1:1     text-dim  6.0:1
     crimson     3.4:1  -- passes for graphics and borders, NOT body text
     oxblood     2.1:1  -- unusable as a foreground, so it is the panel
                           surface instead, which is what it is good at

   Two tones are derived, because the source has no distinct warning colour
   and its crimson is too dark to carry error text:
     --warn   #f3a300   the yellow, deepened
     --alert  #ff2a5a   the crimson, brightened to 5.7:1 so it passes AA

   Roles here: yellow = infrastructure, turquoise = servers,
   crimson = smart home, amber = personal, bright red = offline/errors.

   NOTE: DESIGN.md argues against pure #000 -- glows have nothing to sit
   against, and bright accents smear on OLED as they move. This palette
   specifies it, so it is used as given. Lift --bg-void to #0a0206 if you
   see either problem on your screen.
:root {
  --accent-rgb:     243 230 0;
  --accent-alt-rgb: 197 0 60;
  --warn-rgb:       243 163 0;
  --ok-rgb:         85 234 212;
  --alert-rgb:      255 42 90;
  --text-primary:   #fdf6d8;
  --text-dim:       #8f8a5e;
  --bg-void:        #000000;
  --bg-panel:       rgba(136, 4, 37, 0.26);
  --bg-panel-solid: #1a0308;
}
*/

/* --- FLAT: no scanlines, no grain. Best for a matte kiosk panel. ---------
:root {
  --scanline-opacity: 0;
  --noise-opacity: 0;
}
*/

/* ==========================================================================
   Anything else is fair game too — this file is plain CSS loaded last.

   .alias { font-size: 2.2rem; }                      bigger site name
   .panel-devices { display: none; }                  map-only kiosk view
   .grid { grid-template-columns: minmax(0,1fr); }    ...and full-width map
   .scanlines, .noise, .vignette { display: none; }   strip all effects

   NOTE: the map re-reads its colours only at page load. After changing a
   colour here, reload rather than expecting a live repaint.
   ========================================================================== */