:root {
  /* -------------------------------------------------
     THEME CORE (RGB ONLY)
     Regola: il colore base sta qui; l’alpha resta nei template.
     La scelta del tema avviene via:
       document.documentElement.dataset.amTheme = "p" | "d"
  ------------------------------------------------- */

  /* DEFAULT: paper */
  --am-bg-rgb: 255,255,255;
  --am-fg-rgb: 0,0,0;

  /* link base (può divergere dal fg in temi futuri) */
  --am-link-rgb: var(--am-fg-rgb);

  /* convenience */
  --am-bg: rgb(var(--am-bg-rgb));
  --am-fg: rgb(var(--am-fg-rgb));
  --am-link: rgb(var(--am-link-rgb));

  /* typography */
  --am-font-serif: ui-serif, Georgia, 'Times New Roman', Times, serif;
  --am-font-sans: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* effects */
  --am-blur-backdrop: blur(6px);
  --am-shadow-soft: 0 0 22px rgba(var(--am-fg-rgb), 0.10);
}

/* DARK */
:root[data-am-theme="d"] {
  --am-bg-rgb: 0,0,0;
  --am-fg-rgb: 255,255,255;
  --am-link-rgb: var(--am-fg-rgb);
  --am-audio-ui-filter: invert(1) hue-rotate(180deg);
}

/* PAPER (esplicito, utile se in futuro aggiungiamo temi) */
:root[data-am-theme="p"] {
  --am-bg-rgb: 255,255,255;
  --am-fg-rgb: 0,0,0;
  --am-link-rgb: var(--am-fg-rgb);
  --am-audio-ui-filter: invert(1) hue-rotate(180deg);
}

  @keyframes amGhost {
    0%   { opacity: 0.00; transform: translate(-50%,-50%) scale(0.98); }
    35%  { opacity: 0.10; transform: translate(-50%,-50%) scale(1.00); }
    50%  { opacity: 0.14; transform: translate(-50%,-50%) scale(1.01); }
    70%  { opacity: 0.08; transform: translate(-50%,-50%) scale(1.00); }
    100% { opacity: 0.00; transform: translate(-50%,-50%) scale(0.98); }
  }
  @keyframes amAudioGhost {
    0%   { opacity: 0.00; transform: translate(-50%,-50%) scale(0.98); }
    35%  { opacity: 0.10; transform: translate(-50%,-50%) scale(1.00); }
    50%  { opacity: 0.16; transform: translate(-50%,-50%) scale(1.01); }
    70%  { opacity: 0.08; transform: translate(-50%,-50%) scale(1.00); }
    100% { opacity: 0.00; transform: translate(-50%,-50%) scale(0.98); }
  }

  @keyframes ghostFade {
      0%   { opacity: 0.05; transform: scale(0.1); }
      20%  { opacity: 0.35; transform: scale(0.9); }
      40%  { opacity: 0.85; transform: scale(0.99); }
      50%  { opacity: 0.95; transform: scale(1.01); }
      65%  { opacity: 0.85; transform: scale(1); }
      85%  { opacity: 0.45; transform: scale(0.99); }
      100% { opacity: 0.05; transform: scale(0.3); }
    }

  @keyframes amFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes amPulseHighlight {
    0%   { box-shadow: 0 0 0 rgba(0,0,0,0); }
    50%  { box-shadow: 0 0 18px rgba(255,180,0,0.65); }
    100% { box-shadow: 0 0 0 rgba(0,0,0,0); }
  }

  .am-appear {
    animation: amFadeIn 350ms ease forwards;
  }

  .am-blink {
    animation: amPulseHighlight 900ms ease 3;
  }