/*
 * theme-dark.css
 * Original dark scoreboard theme for the MTEC Race Results Kiosk.
 * Best for indoor use or venues with controlled lighting.
 */

:root {
  /* Core palette */
  --bg:        #0a0c0f;
  --surface:   #111418;
  --border:    #1e2329;
  --amber:     #f5a623;
  --amber-dim: #7a4f0a;
  --white:     #e8eaed;
  --muted:     #5a6370;
  --green:     #4ade80;
  --red:       #e05252;

  /* Derived rgba values — keep in sync with palette above */
  --amber-tint-10:  rgba(245, 166,  35, 0.04);
  --amber-tint-25:  rgba(245, 166,  35, 0.07);
  --amber-tint-35:  rgba(245, 166,  35, 0.08);
  --amber-tint-50:  rgba(245, 166,  35, 0.12);
  --amber-tint-60:  rgba(245, 166,  35, 0.14);
  --green-tint-10: rgba( 74, 222, 128, 0.05);
  --green-tint-20: rgba( 74, 222, 128, 0.08);
  --green-tint-30:  rgba( 74, 222, 128, 0.10);
  --green-tint-60:  rgba( 74, 222, 128, 0.20);
  --green-tint-605: rgba( 74, 222, 128, 0.25);
  --muted-tint-40: rgba( 90,  99, 112, 0.15);
  --red-tint-30:    rgba(224,  82,  82, 0.10);
  --red-tint-75:   rgba(224,  82,  82, 0.25);

  /* Button text on primary background */
  --btn-primary-text: #0a0c0f;

  /* Debug panel */
  --debug-bg:        #0d1117;
  --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);
  
  --accent:         var(--green);
  --accent-dim:     var(--green-dim);
  --accent-tint-10: var(--green-tint-10);
  --accent-tint-25: var(--green-tint-25);
  --accent-tint-35: var(--green-tint-35);
  --accent-tint-50: var(--green-tint-50);
  --accent-tint-60: var(--green-tint-60);
  --accent-text:    var(--btn-primary-text);
}