/* =========================================================
   PIANO TOKENS — DEFAULT (Legacy Visual)
   No cambia apariencia actual
   ========================================================= */

:root {
  /* === KEY GEOMETRY === */
  --white-key-w: 40px;
  --black-key-w: 26px;
  --white-key-h: 160px;
  --black-key-h: 104px;
  --black-key-top: -2px;

  /* === WHITE KEYS === */

  --piano-white-bg:
    linear-gradient(to bottom, #f7f8fa 0%, #eef1f5 58%, #e6e9ee 100%);

  --piano-white-border:
    1px solid rgba(33, 37, 43, 0.22);

  --piano-white-shadow-inner:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 -1px 2px rgba(18, 22, 28, 0.12),
    0 1px 3px rgba(0, 0, 0, 0.1);

  --piano-white-label-color:
    rgba(24, 28, 34, 0.58);


  /* === BLACK KEYS === */

  --piano-black-bg:
    linear-gradient(to bottom, #2a2f36 0%, #1d2229 52%, #141920 100%);

  --piano-black-shadow-inner:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 2px rgba(0, 0, 0, 0.48),
    0 2px 5px rgba(0, 0, 0, 0.5);

  --piano-black-label-color:
    rgba(236, 241, 247, 0.72);


  /* === CONTAINER (por ahora neutro) === */

  --piano-container-bg:
    radial-gradient(circle at 50% 38%, #202329 0%, #171a20 46%, #101317 100%);
  --piano-container-shadow:
    0 18px 40px rgba(0, 0, 0, 0.42),
    0 2px 10px rgba(0, 0, 0, 0.28);

}