/* ============================================================
   Color Room — Design Tokens
   Light theme · Navy accent · Cool neutral around video
   ============================================================ */
:root {
  /* Surfaces */
  --bg:             #ffffff;
  --bg-soft:        #f8fafc;
  --bg-deep:        #f1f5f9;
  --surface:        #fbfcfe;
  --surround:       #c8ccd3;        /* cool neutral grey around video, ~75% reflectance */
  --border:         #e2e8f0;
  --border-soft:    #eef2f7;
  --border-strong:  #cbd5e1;

  /* Text — deep navy tones */
  --text:           #0f172a;
  --text-dim:       #475569;
  --text-mute:      #94a3b8;
  --muted:          #cbd5e1;

  /* Navy accent */
  --navy:           #1e3a8a;
  --navy-bright:    #2563eb;
  --navy-deep:      #1e40af;
  --navy-darker:    #172554;
  --navy-soft:      rgba(30, 58, 138, 0.08);
  --navy-softer:    rgba(30, 58, 138, 0.04);
  --navy-glow:      rgba(30, 58, 138, 0.32);

  /* Semantic */
  --live:           #dc2626;
  --live-glow:      rgba(220, 38, 38, 0.40);
  --ok:             #059669;
  --ok-glow:        rgba(5, 150, 105, 0.30);

  /* Plyr theming overrides */
  --plyr-color-main: var(--navy-bright);
  --plyr-video-control-color: #ffffff;
  --plyr-video-control-color-hover: #ffffff;
  --plyr-video-background: transparent;
  --plyr-control-radius: 6px;
  --plyr-font-family: 'Rubik', system-ui, sans-serif;
  --plyr-range-track-height: 4px;
  --plyr-range-thumb-height: 14px;
  --plyr-range-thumb-background: var(--navy-bright);
  --plyr-range-fill-background: var(--navy-bright);
  --plyr-tooltip-background: rgba(15, 23, 42, 0.95);
  --plyr-tooltip-color: #fff;
  --plyr-menu-background: rgba(255, 255, 255, 0.98);
  --plyr-menu-color: var(--text);
  --plyr-video-controls-background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));

  /* Motion */
  --ease:     cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}