/* Palette AppToMe — valori presi da apptome-app/src/theme/main.css.
   Se cambiano lì, vanno riportati qui: è l'unico punto di contatto fra il
   design dell'app e quello dei manuali. */
:root {
  --apptome-pink: #ed2d5b;
  --apptome-pink-l2: #f7b2c8;
  --apptome-pink-l3: #fce3e9;
  --apptome-purple: #8e44ad;
  --apptome-purple-l2: #9b59b5;
  --apptome-purple-l3: #c19bd3;
  --apptome-yellow: #f9b511;
  --apptome-yellow-l3: #fde999;
  --apptome-orange: #f98511;
  --apptome-green: #16a084;
  --apptome-green-l2: #19bc9b;
  --apptome-green-l3: #60eace;
  --apptome-cyan: #287fba;
  --apptome-cyan-l2: #3399db;
  --apptome-blue: #2b3d4f;
  --apptome-blue-l2: #3d566d;
  --apptome-blue-l3: #7c9bb7;
  --apptome-gray-dark: #6c757d;
  --apptome-gray: #93a5a5;
  --apptome-gray-l2: #bfc9c9;
  --apptome-gray-l3: #edeff2;
  --apptome-dark: #1e1e1e;
}

/* Material usa il viola come colore primario (barra, titoli, elementi attivi)
   e il rosa come accento, esattamente come l'app. */
[data-md-color-primary="custom"] {
  --md-primary-fg-color: var(--apptome-purple);
  --md-primary-fg-color--light: var(--apptome-purple-l2);
  --md-primary-fg-color--dark: #6f3488;
  --md-primary-bg-color: #fff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
}

[data-md-color-accent="custom"] {
  --md-accent-fg-color: var(--apptome-pink);
  --md-accent-fg-color--transparent: rgba(237, 45, 91, 0.1);
  --md-accent-bg-color: #fff;
  --md-accent-bg-color--light: rgba(255, 255, 255, 0.7);
}

[data-md-color-scheme="default"] {
  --md-typeset-a-color: var(--apptome-purple);
  --md-footer-bg-color: var(--apptome-blue);
  --md-footer-bg-color--dark: #22313f;
  --md-code-bg-color: var(--apptome-gray-l3);
}

/* Schema scuro: il viola pieno perde contrasto sul fondo scuro, si usa il tono
   chiaro; il resto segue le stesse famiglie di colore. */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--apptome-purple-l2);
  --md-accent-fg-color: #f4567d;
  --md-typeset-a-color: var(--apptome-purple-l3);
  --md-footer-bg-color: #1b2733;
}

/* Titoli: gerarchia con i colori dell'app, come nelle intestazioni delle pagine. */
.md-typeset h1 { color: var(--apptome-purple); font-weight: 700; }
.md-typeset h2 { color: var(--apptome-blue); }
[data-md-color-scheme="slate"] .md-typeset h1 { color: var(--apptome-purple-l3); }
[data-md-color-scheme="slate"] .md-typeset h2 { color: var(--apptome-blue-l3); }

/* Avvisi sui moduli opzionali: verde AppToMe per le note, giallo per gli
   avvertimenti, rosa per le operazioni irreversibili. */
.md-typeset .admonition.info,
.md-typeset details.info { border-color: var(--apptome-green); }
.md-typeset .info > .admonition-title,
.md-typeset .info > summary {
  background-color: rgba(22, 160, 132, 0.1);
}
.md-typeset .info > .admonition-title::before,
.md-typeset .info > summary::before { background-color: var(--apptome-green); }

.md-typeset .admonition.warning,
.md-typeset details.warning { border-color: var(--apptome-orange); }
.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary { background-color: rgba(249, 133, 17, 0.1); }
.md-typeset .warning > .admonition-title::before,
.md-typeset .warning > summary::before { background-color: var(--apptome-orange); }

/* Screenshot dei flussi mobile: larghezza contenuta, così non esplodono su desktop. */
img[src*="/screenshots/"],
img[src*="screenshot-placeholder"] {
  max-width: 300px;
  display: block;
  margin: 1.4rem auto;
  border: 1px solid var(--apptome-gray-l2);
  border-radius: 18px;
  box-shadow: 0 2px 12px rgba(43, 61, 79, 0.12);
}

/* Screenshot desktop (staff): a piena larghezza. */
img[src*="/screenshots/"][src*="-desktop"] {
  max-width: 100%;
  border-radius: 8px;
}

/* Le schede della home: bordo viola sull'hover, come le card dell'app. */
.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--apptome-purple-l3);
  box-shadow: 0 2px 12px rgba(142, 68, 173, 0.15);
}