/* Panel-Sync Demo — Diplomacy Music Theme */
/* Earthy neutrals + muted cyan accent — matches Diplomacy's brand identity */

:root {
  /* Core palette */
  --color-bg:            #302D26;
  --color-surface:       #3a3630;
  --color-surface-hover: #4E433D;
  --color-accent:        #A1CCE0;
  --color-accent-dim:    #849396;
  --color-text:          #F2F1F0;
  --color-text-muted:    #D9D7C2;
  --color-text-secondary:#979595;
  --color-panel-bg:      #1a1815;
  --color-divider:       #4E433D;

  /* Scrubber */
  --color-scrubber-bg:     #4E433D;
  --color-scrubber-fill:   #A1CCE0;
  --color-dot-active:      #A1CCE0;
  --color-dot-visited:     #849396;
  --color-dot-upcoming:    #4E433D;

  /* Controls */
  --color-controls-bg:     rgba(48, 45, 38, 0.95);
  --color-button:          #F2F1F0;
  --color-button-hover:    #A1CCE0;
  --color-play-bg:         #A1CCE0;
  --color-play-fg:         #302D26;

  /* Typography — Knockout unavailable as web font, use geometric sans fallback */
  --font-display:  'Knockout', 'DIN Condensed', 'Impact', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ui:       -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-caption:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Layout */
  --border-radius:    8px;
  --border-radius-sm: 4px;
  --header-height:    48px;
  --controls-height:  180px;

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-medium: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}