/* ==========================================================================
   fp-tools.css — shared design tokens for the Fretprints practice tools
   (Ear Trainer, Chord Library, and the rest as they adopt the look).

   The single place the tools' shared look is defined. Values match the
   Fingerboard 2.0 app (v2/app-body.php for controls, DEFAULT_STYLE in
   fretboard-geometry.js for the neck — neck colors sampled from the live
   render). Each tool's scoped stylesheet maps its own variables onto these
   WITH a fallback, e.g.  --line: var(--fp-line, #e2e2e2);  so editing a value
   here restyles every tool at once, and a tool still renders correctly if
   this file is ever missing.

   Tokens only — no component rules: each tool keeps its own class names.
   Deployed to the theme root by deploy/deploy-fp-tools.sh; tools load it via
   wp_enqueue_style('fp-tools', ...) with the file's mtime as the version.
   ========================================================================== */
:root {
	/* Text */
	--fp-ink:        #2a2a2a;
	--fp-ink-dim:    #555555;
	--fp-ink-faint:  #7d7e7f;

	/* Surfaces + lines */
	--fp-panel:      #ffffff;
	--fp-panel-2:    #f5f3ef;
	--fp-line:       #e2e2e2;   /* panel borders, dividers */
	--fp-btn-line:   #cccccc;   /* button borders */
	--fp-hover:      #f0f0f0;   /* button hover */
	--fp-shadow:     rgba(0,0,0,.07);
	--fp-radius:     3px;       /* buttons */
	--fp-radius-panel: 4px;     /* cards / panels */

	/* Color roles: slate = selected/structural, orange = root/key + the one primary action */
	--fp-slate:      #445e72;
	--fp-slate-hi:   #3a5062;
	--fp-orange:     #ee6600;
	--fp-orange-lo:  #d95c00;

	/* Feedback */
	--fp-good:       #3f7f4e;
	--fp-good-bg:    #e6f1e8;
	--fp-bad:        #c0483a;
	--fp-bad-bg:     #f6e2dd;

	/* Neck / diagrams */
	--fp-neck-board:  #f5f3ef;
	--fp-neck-inlay:  #eeeae6;
	--fp-neck-fret:   #aeaca7;
	--fp-neck-nut:    #9d9d9d;
	--fp-neck-string: #3a3a3a;
	--fp-neck-num:    #7d7e7f;
	--fp-neck-ring:   #f5b800;  /* soft gold root ring (used at ~55% opacity) */

	/* Type */
	--fp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}