/* Ritmik color tokens — extracted verbatim from the ritmik.net landing page. */
:root {
  /* ---- base palette ---- */
  --ink: #181509;        /* near-black warm ink — text, dark cards, buttons */
  --cream: #f4eddd;      /* warm cream — text on ink, cream wash */
  --cream-2: #efe6d2;    /* deeper cream — neutral card surface */
  --paper: #fffdf7;      /* warm white — nav pill, preview cards, pages */
  --green: #0c6c5f;      /* brand green — logo, kickers, display text */
  --lime: #c7f04a;       /* lime — CTAs, active chips, highlights */
  --coral: #ff6a3a;      /* coral — export/energy cards */
  --indigo: #6f6cf0;     /* indigo — notation cards, band */
  --yellow: #ffc63d;     /* yellow — structure/practice cards */
  --blue: #4f8df7;       /* blue — playback cards */
  --footer-ink: #100f0c; /* footer black */

  /* ---- text-on-color pairings (exact landing values) ---- */
  --on-green: #eafaf5;
  --on-indigo: #f3f2ff;
  --on-coral: #fff4ee;
  --on-blue: #f1f6ff;
  --on-ink: var(--cream);
  /* yellow, lime, cream cards use --ink for text */

  /* ---- page washes (site background themes) ---- */
  --wash-mint: #e9f6cf;   /* default */
  --wash-cream: #f4eddd;
  --wash-peach: #ffe2cd;

  /* ---- semantic (mint wash default) ---- */
  --bg: var(--wash-mint);
  --display: var(--green);      /* big display headline color on the wash */
  --band: var(--indigo);        /* full-bleed rounded band background */
  --band-ink: #f4eddd;
  --band-sub: #d6d4fb;
  --surface-card: var(--paper);
  --text-body: var(--ink);
  --text-muted: rgba(24, 21, 9, 0.72);
  --staff-line: rgba(24, 21, 9, 0.09); /* ruled staff-line motif color */
  --staff-line-light: rgba(255, 255, 255, 0.07); /* staff lines on dark footer */
}

/* alternate washes, as on the landing page (html[data-theme="…"]) */
[data-theme="cream"] { --bg: #f4eddd; --display: #181509; --band: #0c6c5f; --band-ink: #f4eddd; --band-sub: #bfe3da; }
[data-theme="peach"] { --bg: #ffe2cd; --display: #2f2b86; --band: #ff6a3a; --band-ink: #fff3ea; --band-sub: #ffd9c6; }
[data-theme="mint"]  { --bg: #e9f6cf; --display: #0c6c5f; --band: #6f6cf0; --band-ink: #f4eddd; --band-sub: #d6d4fb; }