/* ========================================
   ローディングアニメーション用カラーテーマ
   色相は index のスライダーで変更可能（明度・彩度は固定）
   ======================================== */

:root {
  --loader-bg: #1a1a1a;

  /* 色相のみスライダーで変更。明度・彩度は固定 */
  --loader-accent-h: 210;
  --loader-accent-s: 65%;
  --loader-accent-l: 62%;

  --loader-accent: hsl(var(--loader-accent-h), var(--loader-accent-s), var(--loader-accent-l));

  /* rgba 用（スライダー操作時に JS で更新） */
  --loader-accent-rgb: 107, 155, 209;

  --loader-accent-dark: hsl(var(--loader-accent-h), var(--loader-accent-s), 45%);
  --loader-accent-mid: hsl(var(--loader-accent-h), var(--loader-accent-s), 52%);
  --loader-accent-darker: hsl(var(--loader-accent-h), var(--loader-accent-s), 35%);

  /* ハイライト（同じ色相で明るめ） */
  --loader-highlight: hsl(var(--loader-accent-h), 40%, 92%);

  --loader-border: rgba(var(--loader-accent-rgb), 0.2);
  --loader-border-strong: rgba(var(--loader-accent-rgb), 0.25);
  --loader-glow: rgba(var(--loader-accent-rgb), 0.4);
}