/* ============================================================
   HIGH FIDELITY · by 8pus.eu — design tokens
   Builds on the OCTOPUS · ink music system (DM Sans / DM Mono,
   warm paper, hairlines, electric blue). Theme via
   [data-hf-theme="light" | "dark"] on any ancestor.
   Re-maps the OCTOPUS base vars in dark so DS components follow.
   ============================================================ */
:root, [data-hf-theme="light"] {
  --hf-bg:          #fafaf8;   /* page / stage ground          */
  --hf-surface:     #ffffff;   /* sheets, cards, inputs        */
  --hf-surface-2:   #f3f1ec;   /* chips, skeleton, tint blocks */
  --hf-surface-3:   #e9e6df;   /* skeleton pulse peak          */
  --hf-ink:         #0b0b0b;
  --hf-ink-2:       #555555;
  --hf-muted:       #888888;
  --hf-line:        #e8e5e0;
  --hf-line-strong: #dddddd;
  --hf-accent:      #0069ff;   /* OCTOPUS electric blue        */
  --hf-accent-ink:  #ffffff;
  --hf-accent-bg:   #eef4ff;
  --hf-hires:       #6d28d9;   /* Hi-Res badge (revenue violet)*/
  --hf-hires-bg:    #f5f0ff;
  --hf-success:     #166534;
  --hf-success-bg:  #ecfdf3;
  --hf-danger:      #b3261e;
  --hf-scrim:       rgba(11,11,11,.32);
  --hf-reflect:     rgba(0,0,0,.14); /* cover reflection strength */
  --hf-cover-shadow: 0 10px 28px rgba(0,0,0,.16);
  --hf-sheet-shadow: 0 -12px 40px rgba(0,0,0,.14);
  --hf-whatsapp:    #25d366;
  --hf-whatsapp-ink:#0b2e18;
}

[data-hf-theme="dark"] {
  --hf-bg:          #0e0e0d;
  --hf-surface:     #181816;
  --hf-surface-2:   #22211e;
  --hf-surface-3:   #2e2d29;
  --hf-ink:         #f3f1ec;
  --hf-ink-2:       #b9b5ad;
  --hf-muted:       #8a867e;
  --hf-line:        #2a2926;
  --hf-line-strong: #3a3935;
  --hf-accent:      #3d8bff;
  --hf-accent-ink:  #ffffff;
  --hf-accent-bg:   #13233d;
  --hf-hires:       #b79cff;
  --hf-hires-bg:    #251c3d;
  --hf-success:     #6ee7a8;
  --hf-success-bg:  #0f2a1c;
  --hf-danger:      #ff8a80;
  --hf-scrim:       rgba(0,0,0,.6);
  --hf-reflect:     rgba(255,255,255,.10);
  --hf-cover-shadow: 0 12px 32px rgba(0,0,0,.6);
  --hf-sheet-shadow: 0 -12px 40px rgba(0,0,0,.5);

  /* OCTOPUS base re-map so DS components render in dark */
  --paper: #0e0e0d; --surface: #181816; --surface-sunk: #141412; --topbar: #22211e;
  --ink: #f3f1ec; --ink-1: #f3f1ec; --ink-2: #b9b5ad; --ink-muted: #8a867e; --ink-faint: #6f6c65;
  --line: #2a2926; --line-soft: #22211e; --line-strong: #3a3935;
  --octopus-blue: #3d8bff; --octopus-blue-ink: #9cc2ff; --octopus-blue-bg: #13233d;
  --revenue: #b79cff; --revenue-bg: #251c3d;
}

:root {
  --hf-cover:      232px;  /* centre cover, viewer 390px   */
  --hf-cover-artist: 200px; /* centre cover, artist mode  */
  --hf-cover-thumb: 40px;  /* order list / sheet uses 60px */
  --hf-hit:        48px;   /* min touch target             */
  --hf-r-cover:    4px;
  --hf-r-sheet:    20px;
  --hf-r-btn:      10px;
  --hf-r-frame:    36px;
  --hf-ease-flow:  cubic-bezier(.22,.8,.24,1);
  --hf-dur-flow:   .42s;
}

@keyframes hf-manta {
  0%, 100% { transform: translateY(0) scaleX(1) scaleY(1); }
  50%      { transform: translateY(-6%) scaleX(.86) scaleY(1.04); }
}
@media (prefers-reduced-motion: reduce) { [style*="hf-manta"] { animation: none !important; } }
@keyframes hf-pulse { 0%,100% { opacity: .55 } 50% { opacity: 1 } }

/* Auto-Dark: folgt dem System, solange kein data-hf-theme gesetzt ist */
@media (prefers-color-scheme: dark) {
  :root:not([data-hf-theme]) {
  --hf-bg:          #0e0e0d;
  --hf-surface:     #181816;
  --hf-surface-2:   #22211e;
  --hf-surface-3:   #2e2d29;
  --hf-ink:         #f3f1ec;
  --hf-ink-2:       #b9b5ad;
  --hf-muted:       #8a867e;
  --hf-line:        #2a2926;
  --hf-line-strong: #3a3935;
  --hf-accent:      #3d8bff;
  --hf-accent-ink:  #ffffff;
  --hf-accent-bg:   #13233d;
  --hf-hires:       #b79cff;
  --hf-hires-bg:    #251c3d;
  --hf-success:     #6ee7a8;
  --hf-success-bg:  #0f2a1c;
  --hf-danger:      #ff8a80;
  --hf-scrim:       rgba(0,0,0,.6);
  --hf-reflect:     rgba(255,255,255,.10);
  --hf-cover-shadow: 0 12px 32px rgba(0,0,0,.6);
  --hf-sheet-shadow: 0 -12px 40px rgba(0,0,0,.5);

  /* OCTOPUS base re-map so DS components render in dark */
  --paper: #0e0e0d; --surface: #181816; --surface-sunk: #141412; --topbar: #22211e;
  --ink: #f3f1ec; --ink-1: #f3f1ec; --ink-2: #b9b5ad; --ink-muted: #8a867e; --ink-faint: #6f6c65;
  --line: #2a2926; --line-soft: #22211e; --line-strong: #3a3935;
  --octopus-blue: #3d8bff; --octopus-blue-ink: #9cc2ff; --octopus-blue-bg: #13233d;
  --revenue: #b79cff; --revenue-bg: #251c3d;
  }
}