/*
 * Minimal base styles served by Propshaft before Vite/Tailwind loads.
 * CSS variables here MUST stay in sync with app/frontend/styles/_variables.css
 * (the single source of truth). They are duplicated because Propshaft cannot
 * import from the Vite pipeline, and these must load first to prevent FOUC.
 */

:root {
  --color-bg: #F5F0E6;
  --color-card-bg: #FAF6EE;
  --color-card-border: #E8DFD0;
  --color-text-primary: #3D3425;
  --color-text-secondary: #8B7355;
  --color-text-muted: #A89880;
  --color-accent: #E07B3C;
  --color-accent-hover: #C9612A;
  --color-bar-bg: #2C2416;
  --color-playhead: #2D9CDB;
  --color-surface: #EDE6D8;
  --color-divider: #D4C4A8;
  --color-divider-faint: #F4EEE5;
  --color-text-dark: #2C2416;
  --color-text-soft: #5C4E3D;
  --color-danger: #C0392B;
  --color-danger-hover: #A93226;
  --color-success: #1D9E75;
  --color-waveform: #8C806E;
  --color-fragment-border: #C4B79A;

  /* Bar (dark background) */
  --color-bar-text: rgba(255, 255, 255, 0.9);
  --color-bar-text-secondary: rgba(255, 255, 255, 0.55);
  --color-bar-text-muted: rgba(255, 255, 255, 0.4);
  --color-bar-border: rgba(255, 255, 255, 0.12);
  --color-bar-surface: rgba(255, 255, 255, 0.08);

  /* Overlay */
  --color-overlay: rgba(44, 36, 22, 0.55);

  --font-heading: "Source Serif 4", Georgia, serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
}

body {
  background: var(--color-bg);
  color: var(--color-text-primary);
}