@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {

  /* Keyboard Styles */
  .piano-key {
    @apply transition-colors duration-100 ease-in-out cursor-pointer;
  }

  .piano-key.white {
    @apply fill-white stroke-black stroke-[1px];
  }

  .piano-key.black {
    @apply fill-gray-900 stroke-black stroke-[1px];
  }

  /* Active states / Feedback colors */
  .piano-key[data-status="perfect"] {
    @apply fill-emerald-400 !important;
  }

  .piano-key[data-status="early"] {
    @apply fill-amber-300 !important;
  }

  .piano-key[data-status="late"] {
    @apply fill-purple-400 !important;
  }

  .piano-key[data-status="wrong"] {
    @apply fill-rose-500 !important;
  }

  /* Ghost notes (expected but unplayed) */
  .piano-key[data-status="ghost"] {
    @apply fill-sky-200/50 stroke-sky-400 stroke-2 !important;
  }

  .piano-key.black[data-status="ghost"] {
    @apply fill-sky-500/50 stroke-sky-400 stroke-2 !important;
  }

  /* LH ghost notes (emerald) */
  .piano-key[data-status="ghost-lh"] {
    fill: rgba(52, 211, 153, 0.5) !important;
    stroke: #34d399 !important;
    stroke-width: 2px !important;
  }

  .piano-key.black[data-status="ghost-lh"] {
    fill: rgba(16, 185, 129, 0.5) !important;
    stroke: #34d399 !important;
    stroke-width: 2px !important;
  }

  /* RH ghost notes (sky) */
  .piano-key[data-status="ghost-rh"] {
    fill: rgba(56, 189, 248, 0.5) !important;
    stroke: #38bdf8 !important;
    stroke-width: 2px !important;
  }

  .piano-key.black[data-status="ghost-rh"] {
    fill: rgba(14, 165, 233, 0.5) !important;
    stroke: #38bdf8 !important;
    stroke-width: 2px !important;
  }
}

body {
  background-color: #0f172a;
  /* Slate 900 for Zen Clarity */
  -webkit-touch-callout: none;
  /* Disable iOS context menu on long press */
  -webkit-user-select: none;
  /* Disable text selection */
  user-select: none;
  touch-action: pan-x pan-y;
  /* Allows scrolling but disables double-tap zoom */

  /* iOS Safe Area Padding (for iPhone notch/Dynamic Island in landscape) */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}

/* VexFlow Sheet Music Dark Theme Overrides */
#sheet-music-container svg path:not([fill="none"]),
#sheet-music-container svg line:not([fill="none"]),
#sheet-music-container svg rect:not([fill="none"]),
#sheet-music-container svg text:not([fill="none"]) {
  fill: currentColor;
}

#sheet-music-container svg path[fill="none"],
#sheet-music-container svg line[fill="none"],
#sheet-music-container svg rect[fill="none"],
#sheet-music-container svg text[fill="none"] {
  fill: none;
}

#sheet-music-container svg path,
#sheet-music-container svg line,
#sheet-music-container svg rect,
#sheet-music-container svg text {
  stroke: currentColor;
}

#sheet-music-container svg {
  color: #e2e8f0;
  /* slate-200 default */
}

/* Preserve dynamic hit/miss accuracy colors */
#sheet-music-container .vf-hit {
  color: #fbbf24 !important;
  /* gold */
}

#sheet-music-container .vf-miss {
  color: #ef4444 !important;
  /* red */
}

#sheet-music-container .vf-highlighted {
  color: #38bdf8 !important;
  /* sky-400 */
}