/* ============================================================================
   NEURO77 — THEME SKIN FILE
   ============================================================================
   HOW TO RE-SKIN:
     1. Copy this file to css/theme-MYNAME.css
     2. Change the values below
     3. In each HTML file, change:
           <link rel="stylesheet" href="css/theme.css">
        to:
           <link rel="stylesheet" href="css/theme-MYNAME.css">

   All colors in style.css and eeg-widgets.css reference var(--t-*) from here.
   ============================================================================ */

:root {

  /* ── Page backgrounds ───────────────────────────────────────────── */
  --t-bg:          #FFF1E5;   /* FT signature salmon/cream page bg   */
  --t-surface:     #FFFFFF;   /* cards, panels, metric items          */
  --t-surface-2:   #F6F0EA;   /* secondary surface, subtle rows       */
  --t-surface-3:   #EDE8E2;   /* tertiary surface, hover, dividers    */
  --t-surface-hover: rgba(0, 0, 0, 0.04); /* hover overlay on light bg */

  /* ── Text ───────────────────────────────────────────────────────── */
  --t-text:        #1A1818;   /* primary body text                    */
  --t-text-muted:  #66605C;   /* captions, secondary labels           */
  --t-text-subtle: #9A948F;   /* very muted, placeholder text         */
  --t-text-inverse: #FFFFFF;  /* text on dark surfaces (navbar etc)   */

  /* ── Borders ────────────────────────────────────────────────────── */
  --t-border:       #4a3c24;              /* general border             */
  --t-border-light: rgba(0,0,0,0.08);    /* very subtle border         */

  /* ── Brand / Navbar ─────────────────────────────────────────────── */
  --t-navbar-bg:   #dbbfa5;   /* dark navy navbar                     */
  --t-navbar-text: #FFFFFF;

  /* ── Accent / Links ─────────────────────────────────────────────── */
  --t-accent:       #0D7680;  /* FT teal — links, active highlights   */
  --t-accent-hover: #0A5A63;
  --t-accent-bg:    rgba(13, 118, 128, 0.08);

  /* ── Status ─────────────────────────────────────────────────────── */
  --t-success:     #00875A;   /* good metric / connected              */
  --t-warning:     #B35000;   /* normal metric / caution              */
  --t-error:       #CC0000;   /* poor metric / disconnected           */
  --t-info:        #0D7680;   /* informational (same as accent)       */

  /* ── Status backgrounds (subtle) ───────────────────────────────── */
  --t-success-bg:  rgba(0, 135, 90,  0.10);
  --t-warning-bg:  rgba(179, 80,  0, 0.10);
  --t-error-bg:    rgba(204, 0,   0, 0.10);

  /* ── EEG Band colours (keep vivid for scientific viz) ───────────── */
  --t-band-delta-a: #6366f1;
  --t-band-delta-b: #8b5cf6;
  --t-band-theta-a: #3b82f6;
  --t-band-theta-b: #06b6d4;
  --t-band-alpha-a: #10b981;
  --t-band-alpha-b: #22c55e;
  --t-band-beta-a:  #f59e0b;
  --t-band-beta-b:  #f97316;
  --t-band-gamma-a: #ef4444;
  --t-band-gamma-b: #dc2626;

  /* ── EEG canvas (stays dark — waveforms require dark bg) ────────── */
  --t-eeg-canvas-bg:     #000000;
  --t-eeg-text:          rgba(255, 255, 255, 0.75);
  --t-eeg-channel-label: rgba(0, 0, 0, 0.55);

  /* ── Overlay/dark modal backgrounds that stay dark by design ────── */
  --t-overlay-bg:        rgba(0, 0, 0, 0.55);  /* backdrop             */
  --t-video-overlay-bg:  rgba(0, 0, 0, 0.75);  /* video labels         */
  --t-tooltip-bg:        rgba(26, 24, 24, 0.96);

  /* ── Rankings (gold / silver / bronze stay the same) ────────────── */
  --t-rank-gold:   #D4AF37;
  --t-rank-silver: #9E9E9E;
  --t-rank-bronze: #CD7F32;

  /* ── Typography ─────────────────────────────────────────────────── */
  --t-font-heading: Georgia, 'Times New Roman', Times, serif;
  --t-font-body:    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --t-font-mono:    'Consolas', 'Monaco', 'Courier New', monospace;

  /* ── Bootstrap 5 overrides (applied via :root so they win) ─────── */
  --bs-body-bg:          var(--t-bg);
  --bs-body-color:       var(--t-text);
  --bs-border-color:     var(--t-border);
  --bs-secondary-bg:     var(--t-surface-2);
  --bs-tertiary-bg:      var(--t-surface-3);
  --bs-secondary-color:  var(--t-text-muted);
  --bs-tertiary-color:   var(--t-text-subtle);
  --bs-link-color:       var(--t-accent);
  --bs-link-hover-color: var(--t-accent-hover);
  --bs-card-bg:          var(--t-surface);
  --bs-modal-bg:         var(--t-surface);
}

/* ── Bootstrap light theme explicit overrides ──────────────────────── */
[data-bs-theme="light"] {
  --bs-body-bg:          var(--t-bg);
  --bs-body-color:       var(--t-text);
  --bs-card-bg:          var(--t-surface);
  --bs-modal-bg:         var(--t-surface);
}

/* ── Typography ─────────────────────────────────────────────────────── */
body {
  font-family: var(--t-font-body);
  background-color: var(--t-bg);
  color: var(--t-text);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--t-font-heading);
}

code, pre, .font-monospace {
  font-family: var(--t-font-mono);
}

/* ── Semantic metric-status classes (used by JS to toggle status) ──── */
/* These replace hardcoded inline style.color calls in JS              */
.metric-good   { color: var(--t-success) !important; }
.metric-normal { color: var(--t-warning) !important; }
.metric-poor   { color: var(--t-error)   !important; }

.metric-good-bg {
  background-color: var(--t-success-bg) !important;
  border-left-color: var(--t-success)   !important;
}
.metric-normal-bg {
  background-color: var(--t-warning-bg) !important;
  border-left-color: var(--t-warning)   !important;
}
.metric-poor-bg {
  background-color: var(--t-error-bg)   !important;
  border-left-color: var(--t-error)     !important;
}

/* ── Movie overlay (moved from index.html inline styles) ─────────────── */
#movie-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 99999;
}

#movie-player {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#movie-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  padding: 2px 12px;
  border-radius: 4px;
  cursor: pointer;
  z-index: 100000;
}

/* ── "Watch the movie" link (moved from index.html inline styles) ────── */
#watch-movie-link {
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--t-accent);
}

#watch-movie-link:hover {
  color: var(--t-accent-hover);
}