/**
 * MeloDear — 音楽ライブラリ・再生
 * Layer 4: App-Domain Tokens
 * ============================================
 * 依存: design-tokens.css → design-tokens-extended.css → このファイル
 *
 * 命名規約: --app-melo-{category}-{role}[-{variant}]
 */

/* ── Light Mode ── */
:root,
[data-theme="light"] {
  /* Waveform */
  --app-melo-waveform-bg:           var(--color-bg-inset);
  --app-melo-waveform-fill:         var(--color-accent);
  --app-melo-waveform-played:       var(--color-accent-hover);
  --app-melo-waveform-cursor:       var(--color-error);
  --app-melo-waveform-cursor-width: var(--stroke-medium);

  /* Spectrum */
  --app-melo-spectrum-low:  #E54D2E;
  --app-melo-spectrum-mid:  #2BB87A;
  --app-melo-spectrum-high: #2563EB;
  --app-melo-spectrum-bg:   var(--color-bg-inset);

  /* Transport (playback bar) */
  --app-melo-transport-bg:     var(--color-surface);
  --app-melo-transport-height: 64px;
  --app-melo-progress-track:   var(--color-bg-inset);
  --app-melo-progress-fill:    var(--color-accent);
  --app-melo-progress-handle:  var(--color-accent-hover);

  /* Metadata */
  --app-melo-bpm-color:     var(--color-text-secondary);
  --app-melo-key-color:     var(--color-text-secondary);
  --app-melo-album-radius:  var(--radius-sm);
  --app-melo-album-shadow:  var(--shadow-sm);

  /* Similarity */
  --app-melo-similarity-high: var(--color-success);
  --app-melo-similarity-mid:  var(--color-warning);
  --app-melo-similarity-low:  var(--color-text-tertiary);

  /* Playlist */
  --app-melo-playing-row:  var(--color-selected);
  --app-melo-queue-accent: var(--color-accent-subtle);

  /* ── Neumorphism shadows (ADR-0012 / [2026-05-23] feedback) ──
   * Slint は 1 要素 1 drop-shadow しか持てないため、各 elevation を
   * highlight（明色 / 凸の上側）と shadow（暗色 / 凸の下側）の 2 色対で提供。
   * 実装側は Rectangle を 2 枚重ねるか、Path を組合せて使う。
   */
  --app-melo-shadow-elevation-sm-highlight: #FFFFFF;
  --app-melo-shadow-elevation-sm-shadow:    #D0D0DA;
  --app-melo-shadow-elevation-sm-offset:    2px;
  --app-melo-shadow-elevation-sm-blur:      4px;

  --app-melo-shadow-elevation-md-highlight: #FFFFFF;
  --app-melo-shadow-elevation-md-shadow:    #C5C5D2;
  --app-melo-shadow-elevation-md-offset:    6px;
  --app-melo-shadow-elevation-md-blur:      12px;

  --app-melo-shadow-elevation-lg-highlight: #FFFFFF;
  --app-melo-shadow-elevation-lg-shadow:    #B8B8C8;
  --app-melo-shadow-elevation-lg-offset:    12px;
  --app-melo-shadow-elevation-lg-blur:      24px;

  --app-melo-shadow-inset-soft-color:  rgba(0, 0, 0, 0.10);
  --app-melo-shadow-inset-soft-offset: 2px;
  --app-melo-shadow-inset-soft-blur:   6px;

  --app-melo-shadow-inset-deep-color:  rgba(0, 0, 0, 0.20);
  --app-melo-shadow-inset-deep-offset: 4px;
  --app-melo-shadow-inset-deep-blur:   12px;

  --app-melo-shadow-glow-accent-color: var(--color-accent-subtle);
  --app-melo-shadow-glow-accent-blur:  16px;

  /* ── Now Playing 夜空背景 ([2026-05-26] feedback) ──
   * Camelot キー色を星雲グラデーションへ混ぜるため、上下 2 stop を分離。
   * ライトモードでも夜空モチーフは維持（再生中の没入感のため）。
   */
  --app-melo-bg-night-sky-top:    #1B1B2F;
  --app-melo-bg-night-sky-bottom: #2C1B3E;

  /* ── Audio FX セクション見出し ([2026-05-26] feedback) ──
   * Audio FX アコーディオン見出し色。アクセントよりやや落ち着いた hue。
   */
  --app-melo-accent-fx-section: var(--color-accent);

  /* ── Camelot キー色 (24) — [2026-05-31] feedback ──
   * senastra.source: MeloDear model.rs camelot_rgb (ColorScheme::Camelot)
   * キー識別色のため light/dark 同一。a11y_audit::camelot_colors_contrast_minimum 準拠。
   */
  --app-melo-camelot-1a:  #BF1818;
  --app-melo-camelot-1b:  #E74040;
  --app-melo-camelot-2a:  #BF6B18;
  --app-melo-camelot-2b:  #E79440;
  --app-melo-camelot-3a:  #BFBF18;
  --app-melo-camelot-3b:  #E7E740;
  --app-melo-camelot-4a:  #6BBF18;
  --app-melo-camelot-4b:  #94E740;
  --app-melo-camelot-5a:  #18BF18;
  --app-melo-camelot-5b:  #40E740;
  --app-melo-camelot-6a:  #18BF6B;
  --app-melo-camelot-6b:  #40E794;
  --app-melo-camelot-7a:  #18BFBF;
  --app-melo-camelot-7b:  #40E7E7;
  --app-melo-camelot-8a:  #186BBF;
  --app-melo-camelot-8b:  #4094E7;
  --app-melo-camelot-9a:  #1818BF;
  --app-melo-camelot-9b:  #4040E7;
  --app-melo-camelot-10a: #6B18BF;
  --app-melo-camelot-10b: #9440E7;
  --app-melo-camelot-11a: #BF18BF;
  --app-melo-camelot-11b: #E740E7;
  --app-melo-camelot-12a: #BF186B;
  --app-melo-camelot-12b: #E74094;

  /* ── 月関連色（和の天体モチーフ [2026-05-23] feedback）──
   * senastra.review: provisional — geshtalt design review 待ち */
  --app-melo-moon-oboro:  #E8E0C8;
  --app-melo-moon-silver: #C8CDD0;
  --app-melo-moon-hakuji: #EDF1F0;
}

/* ── Dark Mode ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --app-melo-spectrum-low:  #E54D2E;
    --app-melo-spectrum-mid:  #3DD68C;
    --app-melo-spectrum-high: #60A5FA;

    --app-melo-shadow-elevation-sm-highlight: #2F2F39;
    --app-melo-shadow-elevation-sm-shadow:    #18181F;
    --app-melo-shadow-elevation-md-highlight: #32323D;
    --app-melo-shadow-elevation-md-shadow:    #131319;
    --app-melo-shadow-elevation-lg-highlight: #36364A;
    --app-melo-shadow-elevation-lg-shadow:    #0E0E14;

    --app-melo-shadow-inset-soft-color: rgba(0, 0, 0, 0.45);
    --app-melo-shadow-inset-deep-color: rgba(0, 0, 0, 0.65);

    --app-melo-bg-night-sky-top:    #0A0A18;
    --app-melo-bg-night-sky-bottom: #1F0F30;

    --app-melo-accent-fx-section: var(--color-accent-hover);

    --app-melo-camelot-1a:  #BF1818;
    --app-melo-camelot-1b:  #E74040;
    --app-melo-camelot-2a:  #BF6B18;
    --app-melo-camelot-2b:  #E79440;
    --app-melo-camelot-3a:  #BFBF18;
    --app-melo-camelot-3b:  #E7E740;
    --app-melo-camelot-4a:  #6BBF18;
    --app-melo-camelot-4b:  #94E740;
    --app-melo-camelot-5a:  #18BF18;
    --app-melo-camelot-5b:  #40E740;
    --app-melo-camelot-6a:  #18BF6B;
    --app-melo-camelot-6b:  #40E794;
    --app-melo-camelot-7a:  #18BFBF;
    --app-melo-camelot-7b:  #40E7E7;
    --app-melo-camelot-8a:  #186BBF;
    --app-melo-camelot-8b:  #4094E7;
    --app-melo-camelot-9a:  #1818BF;
    --app-melo-camelot-9b:  #4040E7;
    --app-melo-camelot-10a: #6B18BF;
    --app-melo-camelot-10b: #9440E7;
    --app-melo-camelot-11a: #BF18BF;
    --app-melo-camelot-11b: #E740E7;
    --app-melo-camelot-12a: #BF186B;
    --app-melo-camelot-12b: #E74094;

    --app-melo-moon-oboro:  #D8CFB0;
    --app-melo-moon-silver: #AEB4B8;
    --app-melo-moon-hakuji: #DCE3E1;
  }
}

[data-theme="dark"] {
  --app-melo-spectrum-low:  #E54D2E;
  --app-melo-spectrum-mid:  #3DD68C;
  --app-melo-spectrum-high: #60A5FA;

  --app-melo-shadow-elevation-sm-highlight: #2F2F39;
  --app-melo-shadow-elevation-sm-shadow:    #18181F;
  --app-melo-shadow-elevation-md-highlight: #32323D;
  --app-melo-shadow-elevation-md-shadow:    #131319;
  --app-melo-shadow-elevation-lg-highlight: #36364A;
  --app-melo-shadow-elevation-lg-shadow:    #0E0E14;

  --app-melo-shadow-inset-soft-color: rgba(0, 0, 0, 0.45);
  --app-melo-shadow-inset-deep-color: rgba(0, 0, 0, 0.65);

  --app-melo-bg-night-sky-top:    #0A0A18;
  --app-melo-bg-night-sky-bottom: #1F0F30;

  --app-melo-accent-fx-section: var(--color-accent-hover);

  --app-melo-camelot-1a:  #BF1818;
  --app-melo-camelot-1b:  #E74040;
  --app-melo-camelot-2a:  #BF6B18;
  --app-melo-camelot-2b:  #E79440;
  --app-melo-camelot-3a:  #BFBF18;
  --app-melo-camelot-3b:  #E7E740;
  --app-melo-camelot-4a:  #6BBF18;
  --app-melo-camelot-4b:  #94E740;
  --app-melo-camelot-5a:  #18BF18;
  --app-melo-camelot-5b:  #40E740;
  --app-melo-camelot-6a:  #18BF6B;
  --app-melo-camelot-6b:  #40E794;
  --app-melo-camelot-7a:  #18BFBF;
  --app-melo-camelot-7b:  #40E7E7;
  --app-melo-camelot-8a:  #186BBF;
  --app-melo-camelot-8b:  #4094E7;
  --app-melo-camelot-9a:  #1818BF;
  --app-melo-camelot-9b:  #4040E7;
  --app-melo-camelot-10a: #6B18BF;
  --app-melo-camelot-10b: #9440E7;
  --app-melo-camelot-11a: #BF18BF;
  --app-melo-camelot-11b: #E740E7;
  --app-melo-camelot-12a: #BF186B;
  --app-melo-camelot-12b: #E74094;

  --app-melo-moon-oboro:  #D8CFB0;
  --app-melo-moon-silver: #AEB4B8;
  --app-melo-moon-hakuji: #DCE3E1;
}