:root {
  --bg-main: #0b0d10;
  --bg-panel: #11141a;
  --bg-panel-2: #0f1217;

  --text-main: #e7ebf2;
  --text-muted: #9aa4b5;

  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 13px;

  --border-soft: rgba(231, 235, 242, 0.12);

  --z-piano: 10;
  --z-feedback: 30;
  --z-ui: 50;

  --accent-main: #5ea2ff;
  --ok: #39d98a;

  --ui-bg: #151a22;
  --ui-bg-hover: #1b2230;
  --ui-border: rgba(231, 235, 242, 0.12);
  --ui-accent: #5ea2ff;

  --feedback-c4: rgba(236, 242, 250, 0.66);
  --feedback-solfege: rgba(198, 214, 236, 0.66);

  --feedback-correct: linear-gradient(#bff6d6, #77e4a6);
  --feedback-wrong: linear-gradient(#ffc2c2, #ff8585);

  --timing-perfect: #6ef0a0;
  --timing-early: #ffc35c;
  --timing-late: #cc9dff;

  --timing-perfect-bg: linear-gradient(#d1ffe3, #8df0b6);
  --timing-early-bg: linear-gradient(#ffe4b8, #ffc35c);
  --timing-late-bg: linear-gradient(#ead8ff, #cc9dff);

  --timing-perfect-note: linear-gradient(#88efb2, #39d98a);
  --timing-early-note: linear-gradient(#ffd28c, #ffad33);
  --timing-late-note: linear-gradient(#d9b9ff, #b37cff);

  --arcade-hit: #39d98a;
  --arcade-good: #79e9b0;
  --arcade-ok: #ffd166;
  --arcade-miss: #ff7272;

  --ghost-early: linear-gradient(#ffd59b, #ffad33);
  --ghost-late: linear-gradient(#dcc0ff, #b37cff);

  --piano-container-bg: radial-gradient(circle at 50% 34%, #202532 0%, #171c27 48%, #10141c 100%);
  --piano-container-shadow:
    0 20px 44px rgba(0, 0, 0, 0.52),
    0 2px 10px rgba(0, 0, 0, 0.35);

  --piano-white-bg: linear-gradient(to bottom, #f8f9fc 0%, #eef2f7 56%, #e6ebf2 100%);
  --piano-white-border: 1px solid rgba(18, 24, 34, 0.22);
  --piano-white-shadow-inner:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 2px rgba(18, 24, 34, 0.12),
    0 1px 3px rgba(0, 0, 0, 0.12);
  --piano-white-label-color: rgba(19, 25, 34, 0.6);

  --piano-black-bg: linear-gradient(to bottom, #363b45 0%, #292f39 52%, #1d232d 100%);
  --piano-black-shadow-inner:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 2px rgba(0, 0, 0, 0.46),
    0 2px 5px rgba(0, 0, 0, 0.46);
  --piano-black-label-color: rgba(238, 244, 252, 0.82);
}