/*
 * theme-light.css
 * Light outdoor theme for the MTEC Race Results Kiosk.
 * Designed for daytime outdoor use on consumer flatscreen displays.
 * High ambient light readability: light backgrounds, dark text, strong contrast.
 *
 * Palette:
 *   Background base:  #e0eadf  (pale sage green)
 *   Dark / text:      #2b6438  (deep forest green)
 *   Accent:           #f5a623  (amber orange — retained from dark theme)
 */

:root {
  /* Core palette */
  --bg:        #e0eadf;
  --surface:   #cdd9cc;   /* slightly darker sage — header, footer, cards */
  --border:    #b0c2af;   /* muted green-grey for borders */
  --amber:     #f5a623;   /* accent — unchanged */
  --amber-dim: #c47d0a;   /* darker amber for borders/subdued amber contexts */
  --white:     #2b6438;   /* "white" role → primary dark text color */
  --muted:     #5a7a5e;   /* secondary text — mid-tone green-grey */
  --green:     #2b6438;   /* "green" role (debug panel etc.) → same dark green */
  --red:       #c0392b;   /* error red — slightly deeper for light bg readability */

  /* Derived rgba values — keep in sync with palette above */
  --amber-tint-10:  rgba(245, 166,  35, 0.10);  /* boosted slightly for light bg */
  --amber-tint-25:  rgba(245, 166,  35, 0.15);
  --amber-tint-35:  rgba(245, 166,  35, 0.18);
  --amber-tint-50:  rgba(245, 166,  35, 0.22);
  --amber-tint-60:  rgba(245, 166,  35, 0.25);
  --green-tint-10: rgba( 43, 100,  56, 0.05);
  --green-tint-20: rgba( 43, 100,  56, 0.08);
  --green-tint-30:  rgba( 43, 100,  56, 0.10);
  --green-tint-60:  rgba( 43, 100,  56, 0.20);
  --green-tint-605: rgba( 43, 100,  56, 0.30);
  --muted-tint-40: rgba( 90, 122,  94, 0.20);
  --red-tint-30:    rgba(192,  57,  43, 0.10);
  --red-tint-75:   rgba(192,  57,  43, 0.30);

  /* Button text on amber primary background */
  --btn-primary-text: #ffffff;

  /* Debug panel — keep dark for readability of raw JSON */
  --debug-bg:        #1a2e1c;
  --debug-pre-color: #a8d9b0;
  --json-key:        #7dd3fc;
  --json-str:        #86efac;
  --json-num:        #f5a623;
  --json-bool:       #e879f9;
  --json-null:       #94a3b8;

  /* QR code container — always white so QR modules scan correctly */
  --qr-bg: #ffffff;

  /* Accent aliases — swap the accent color by changing these in the theme file.
     All UI components reference --accent* so no HTML changes are needed. */
  --accent:         var(--amber);
  --accent-dim:     var(--amber-dim);
  --accent-tint-10: var(--amber-tint-10);
  --accent-tint-25: var(--amber-tint-25);
  --accent-tint-35: var(--amber-tint-35);
  --accent-tint-50: var(--amber-tint-50);
  --accent-tint-60: var(--amber-tint-60);
  --accent-text:    var(--btn-primary-text);
}