/* Light theme variables (default, dark removed) */
:root{
  --bg:#f8fafc;
  --text:#0f1724;
  --muted:#475569;
  --lesson-ui-color: #8b8b8b;
  --panel-border:rgba(0,0,0,0.08);
  --card-grad-1:rgba(0,0,0,0.02);
  --card-grad-2:rgba(0,0,0,0.04);
  --tile-bg:rgba(0,0,0,0.02);
  --tile-border:rgba(0,0,0,0.08);
  --bullet-bg:rgba(0,0,0,0.02);
  --bullet-border:rgba(0,0,0,0.08);
  --callout-bg:rgba(0,0,0,0.02);
  --callout-border:rgba(0,0,0,0.18);
  --btn-primary-bg:#1d4ed8;
  --btn-primary-border:#1e40af;
  --btn-primary-text:#ffffff;
  --btn-primary-bg-hover:#1e40af;
  --btn-secondary-bg:#e2e8f0;
  --btn-secondary-border:rgba(0,0,0,0.12);
  --btn-secondary-text:#0f1724;
  --btn-ghost-bg:rgba(0,0,0,0.04);
  --btn-ghost-border:rgba(0,0,0,0.08);
  --btn-ghost-text:#334155;
  --footer-text:#64748b;
  /* controls container background (app-specific) */
  --controls-bg:#e9e9e9;
  /* audio loading overlay and init text color */
  --audio-overlay-bg: rgba(233,233,233,0.95);
  --audio-init-text: #666666;
  /* inner container bg + shadow for audio overlay */
  --audio-overlay-inner-bg: rgba(255,255,255,0.95);
  --audio-overlay-inner-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  /* Octave button colors */
  --octave-btn-bg: #e6e9ec;
  --octave-btn-text: #626f80;
  --octave-btn-bg-hover: #cfd4d8;
  --octave-btn-text-hover: #334155;
}

/* Base themed surface for app pages */
body{ background: var(--bg); color: var(--text);}