/* ─────────────────────────────────────────────────────────────────
   METRO LEARNING ACADEMY — COLOUR THEME
   Edit RGB values here to change the entire UI look and feel.
   Format: rgb(R, G, B)  or  rgba(R, G, B, opacity)
   Reload the browser after saving to see changes.
───────────────────────────────────────────────────────────────── */

:root {
  /* Header */
  --color-header-bg:          rgb(46, 66, 114);    /* Dark Mediterranean Blue */
  --color-header-text:        rgb(184, 200, 212);  /* Sky Blue */

  /* Map canvas */
  --color-map-bg:             rgb(255, 255, 255);  /* White */

  /* Legend strip */
  --color-legend-bg:          rgb(228, 235, 242);  /* Light Med. Blue tint */
  --color-legend-border:      rgb(192, 205, 216);
  --color-legend-text:        rgb(46, 66, 114);    /* Dark Mediterranean Blue */

  /* Editor panel */
  --color-panel-bg:           rgb(228, 235, 242);  /* Light Med. Blue tint */
  --color-panel-border:       rgb(192, 205, 216);
  --color-panel-title:        rgb(91, 122, 154);   /* Light Mediterranean Blue */

  /* Line list items */
  --color-item-hover:         rgb(200, 212, 224);  /* Azure Blue tint */
  --color-item-active-bg:     rgb(212, 160, 32);   /* Yellow */
  --color-item-active-text:   rgb(255, 255, 255);

  /* Tool buttons */
  --color-tool-active-bg:     rgb(46, 66, 114);    /* Dark Mediterranean Blue */
  --color-tool-active-text:   rgb(184, 200, 212);  /* Sky Blue */

  /* Action buttons */
  --color-btn-bg:             rgb(255, 255, 255);
  --color-btn-text:           rgb(28, 28, 36);     /* Night */
  --color-btn-border:         rgb(192, 205, 216);
  --color-btn-primary-bg:     rgb(26, 45, 106);    /* Blue */
  --color-btn-primary-text:   rgb(255, 255, 255);
  --color-btn-danger:         rgb(200, 50, 50);    /* Matt red */

  /* Admin badge */
  --color-admin-badge:        rgb(200, 50, 50);    /* Matt red */

  /* View toggle active state */
  --color-toggle-active-bg:   rgb(139, 120, 64);   /* Middlestone */
  --color-toggle-active-text: rgb(255, 255, 255);

  /* Text */
  --color-text-main:          rgb(28, 28, 36);     /* Night */
  --color-text-subtle:        rgb(91, 122, 154);   /* Light Mediterranean Blue */

  /* Station labels (used in SVG via JS) */
  --color-label:              rgb(28, 28, 36);     /* Night */

  /* Hover tooltip */
  --color-tooltip-bg:         rgb(184, 200, 212);  /* Sky Blue */
  --color-tooltip-text:       rgb(28, 28, 36);     /* Night */
  --color-tooltip-border:     rgb(46, 66, 114);    /* Dark Mediterranean Blue */

  /* Video player */
  --color-modal-header-bg:    rgb(46, 66, 114);    /* Dark Mediterranean Blue */
  --color-modal-header-text:  rgb(184, 200, 212);  /* Sky Blue */
  --color-modal-body-bg:      rgb(30, 30, 34);     /* Semi Matt Black */
}