/* 4jibaro color system.
   Source of truth: uploads/Site colors.png + product screenshots.
   Base ramp (raw values) -> semantic aliases (light default, dark override). */
:root {
  /* Brand accent — "Buttons & Links" #FF3F20 */
  --red-500: #ff3f20;   /* primary accent */
  --red-600: #e63216;   /* hover / pressed */
  --red-700: #c82910;   /* deep */
  --red-400: #ff6a52;   /* light */
  --red-100: #ffe4de;   /* tint wash */

  /* Neutral ramp */
  --white:    #ffffff;
  --gray-50:  #f5f5f5;  /* light page background */
  --gray-100: #efefef;
  --gray-200: #e6e6e6;  /* light borders */
  --gray-300: #d4d4d4;
  --gray-400: #999999;  /* subtle labels */
  --gray-500: #808080;  /* muted */
  --gray-600: #4d4d4d;  /* body text (brand) */
  --ink-700:  #222222;  /* headings, nav/footer bg (brand) */
  --ink-800:  #1a1a1a;  /* chord-tone circle (light theme) */
  --ink-900:  #111111;  /* dark page background */
  --black:    #000000;  /* logo ring */

  /* ---- Semantic: light theme (default) ---- */
  --bg-page:        var(--gray-50);
  --surface-card:   var(--white);
  --surface-inset:  var(--gray-100);
  --surface-invert: var(--ink-700);

  --text-heading: var(--ink-700);
  --text-body:    var(--gray-600);
  --text-muted:   var(--gray-500);
  --text-subtle:  var(--gray-400);
  --text-on-accent:  var(--white);
  --text-on-invert:  var(--white);

  --border:        var(--gray-200);
  --border-strong: var(--gray-300);

  --accent:       var(--red-500);
  --accent-hover: var(--red-600);
  --accent-tint:  var(--red-100);

  /* Chord-note tokens */
  --note-root-bg: var(--red-500);
  --note-root-fg: var(--white);
  --note-tone-bg: var(--ink-800);
  --note-tone-fg: var(--white);
  --note-ghost-fg: var(--gray-400);

  --link:       var(--red-500);
  --link-hover: var(--red-600);
}

/* ---- Semantic: dark theme ---- */
[data-theme="dark"] {
  --bg-page:        var(--ink-900);
  --surface-card:   var(--ink-800);
  --surface-inset:  var(--ink-700);
  --surface-invert: var(--white);

  --text-heading: var(--white);
  --text-body:    #c9c9c9;
  --text-muted:   #8a8a8a;
  --text-subtle:  #6b6b6b;
  --text-on-invert:  var(--ink-700);

  --border:        #2e2e2e;
  --border-strong: #3d3d3d;

  --note-tone-bg: var(--white);
  --note-tone-fg: var(--ink-900);
  --note-ghost-fg: #5a5a5a;
}