/* ============================================================
   platoshin. — Design Tokens
   Neutral dark theme · Vermillion accent · Editorial mood
   ============================================================ */
:root {
  /* Backgrounds — neutral dark, almost black, no warm tint */
  --bg:             #0e0e0f;
  --bg-soft:        #141415;
  --bg-deep:        #0a0a0b;
  --surface:        #161618;
  --surface-2:      #1d1d20;
  --surface-3:      #26262a;
  --surround:       #0a0a0b;

  /* Borders */
  --border:         #1d1d20;
  --border-soft:    #151517;
  --border-strong:  #2c2c30;

  /* Text — slightly cool off-white, not cream */
  --text:           #e8e8ea;
  --text-dim:       #9d9da3;
  --text-mute:      #66666b;
  --muted:          #404045;

  /* Accent — pure red (brand) */
  --accent:         #dc2626;
  --accent-bright:  #ef4444;
  --accent-deep:    #b91c1c;
  --accent-soft:    rgba(220, 38, 38, 0.12);
  --accent-softer:  rgba(220, 38, 38, 0.06);
  --accent-glow:    rgba(220, 38, 38, 0.35);

  /* Legacy aliases */
  --navy:           var(--accent);
  --navy-bright:    var(--accent-bright);
  --navy-deep:      var(--accent-deep);
  --navy-darker:    var(--accent-deep);
  --navy-soft:      var(--accent-soft);
  --navy-softer:    var(--accent-softer);
  --navy-glow:      var(--accent-glow);

  /* Semantic */
  --live:           #22c55e;
  --live-glow:      rgba(34, 197, 94, 0.40);
  --ok:             #22c55e;
  --ok-glow:        rgba(34, 197, 94, 0.30);
  --connecting:     #d4a574;
  --connecting-glow: rgba(212, 165, 116, 0.40);
  --error:          #dc2626;
  --error-glow:     rgba(220, 38, 38, 0.40);

  /* Plyr theming — dark */
  --plyr-color-main: var(--text);
  --plyr-video-control-color: var(--text);
  --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(--text);
  --plyr-range-fill-background: var(--text);
  --plyr-tooltip-background: rgba(10, 10, 11, 0.95);
  --plyr-tooltip-color: var(--text);
  --plyr-menu-background: rgba(22, 22, 24, 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);
}