/* cosmic-bridge.css — drop-in token bridge for migrating legacy pages onto the
 * cosmic shell WITHOUT rewriting their existing CSS.
 *
 * Legacy chord-library / vocal-remover pages style themselves with the old
 * design-system tokens (--text-primary, --accent-blue, --card-bg, …) that used
 * to come from /css/styles.css. This file re-declares those names in
 * terms of the LIVE cosmic tokens (--ink, --accent, --surface, …) that
 * cosmic-shell.js sets on :root — so the page adopts the cosmic palette AND
 * stays theme-aware (light/dark/typeface follow the shared Tweaks state),
 * unlike theory-bridge.css which hardcodes a dark palette.
 *
 * Usage: load AFTER css/cosmic-shell.css and BEFORE the page's own stylesheet:
 *   <link rel="stylesheet" href="css/cosmic-shell.css?v=…">
 *   <link rel="stylesheet" href="css/cosmic-bridge.css?v=…">
 *   <link rel="stylesheet" href="/css/that-page.css">
 */
:root {
  /* surfaces / text / lines → live cosmic tokens (theme-aware) */
  --primary-bg:     var(--bg);
  --secondary-bg:   var(--bg2);
  --card-bg:        var(--surface);
  --border-color:   var(--line);
  --text-primary:   var(--ink);
  --text-secondary: var(--sub);

  /* accents */
  --accent-blue:    var(--accent);
  --accent-purple:  var(--accent2);
  --accent-green:   #34d36e;
  --gradient-primary: linear-gradient(135deg, var(--accent2), var(--accent));
  --error-color:    #ff6b6b;

  /* radii */
  --border-radius:       12px;
  --border-radius-large: 18px;

  /* elevation (tuned to read on both light and dark cosmic backgrounds) */
  --shadow-small:  0 10px 26px -16px rgba(0,0,0,.45);
  --shadow-medium: 0 18px 44px -24px rgba(0,0,0,.5);
  --shadow-heavy:  0 30px 70px -30px rgba(0,0,0,.6);

  /* motion */
  --transition-fast:   .18s ease;
  --transition-smooth: .28s ease;
}