/* ═══════════════════════════════════════════════════════════════════
   THEMES.CSS — Design tokens for Dark (default) and Light modes
   Visual identity (Hidryx void-black / chrome-silver / violet-pulse)
   is preserved 1:1 for Dark mode. Light mode reuses the same accent
   hues on a light surface so brand identity carries over.
   ═══════════════════════════════════════════════════════════════════ */

:root,
[data-theme="dark"] {
  --bg:       #080809;
  --panel:    #0c0c0e;
  --border:   #1d1d22;
  --green:    #b9bcc4;   /* chrome/silver — primary accent */
  --green2:   #8b8f99;   /* dimmer chrome */
  --red:      #8b5cf6;   /* violet accent */
  --red2:     #6d28d9;   /* deep violet */
  --amber:    #c4a6ff;   /* light violet highlight */
  --white:    #eceef2;
  --dim:      #5a5b63;
  --mono:     'Share Tech Mono', 'Courier New', monospace;
  --display:  'VT323', monospace;

  /* derived surface tones used across components */
  --surface-1: #0a0a0a;
  --surface-2: #101014;
  --surface-hover: #140e1c;
  --surface-active: #181a1f;
  --surface-active-2: #1c1430;
  --text-muted-1: #888;
  --text-muted-2: #777;
  --text-muted-3: #666;
  --scanline-opacity: .13;
  --matrix-opacity: .055;
  --card-text: #777;
  --table-text: #888;
}

/* Light mode: same brand hues, inverted surfaces. Only tokens change —
   no component rule is redefined here, so layout/behaviour stay identical. */
[data-theme="light"] {
  --bg:       #f4f4f6;
  --panel:    #ffffff;
  --border:   #dcdce2;
  --green:    #5b3fa0;   /* deep violet-chrome for contrast on light bg */
  --green2:   #7a6aa8;
  --red:      #7c3aed;
  --red2:     #6d28d9;
  --amber:    #8b5cf6;
  --white:    #17171c;
  --dim:      #8a8a92;
  --mono:     'Share Tech Mono', 'Courier New', monospace;
  --display:  'VT323', monospace;

  --surface-1: #ececf1;
  --surface-2: #ffffff;
  --surface-hover: #f0ecfb;
  --surface-active: #eeeef2;
  --surface-active-2: #ece4fb;
  --text-muted-1: #55555c;
  --text-muted-2: #66666e;
  --text-muted-3: #77777e;
  --scanline-opacity: .035;
  --matrix-opacity: .045;
  --card-text: #55555c;
  --table-text: #55555c;
}

/* Smooth, non-jarring theme transition */
body,
.topbar, .sidebar, .statusbar, .panel, .card, .contact-item,
.ceo-block, .countdown-box, .cat-item, .prize-card, .service-table,
input, textarea, select {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}