/* =========================================================================
   Bottega ASTEA — token di design condivisi con il Synodus Sanguinis.
   Valori estratti dai file reali del sito principale (Synodus/index.html,
   uso ripetuto degli stessi esadecimali) e da synodus-biblioteca/public/
   css/biblioteca.css (unico :root token gia' presente nel progetto,
   confermato identico ai valori hardcoded di index.html). Non inventare
   nuovi valori qui: eventuali aggiunte vanno derivate da questa stessa
   famiglia cromatica/tipografica.

   Letto anche a runtime da src/services/certificate-styles.js (fs.readFile,
   nessun bundler) cosi' che il certificato pubblico condivida esattamente
   questi stessi token invece di duplicarli inline.
   ========================================================================= */

:root {
  /* -- palette Synodus (identica a synodus-biblioteca/public/css/biblioteca.css) */
  --ink: #1b1515;
  --ink-soft: #4b3d38;
  --paper: #eee6d8;
  --paper-deep: #e3d7c5;
  --night: #0d090a;
  --night-2: #171012;
  --wine: #74202d;
  --gold: #b08d57;
  --gold-hi: #d8b47c;
  --steel: #65727a;
  --ash: #80736e;
  --line: rgba(69, 43, 35, .18);

  /* -- famiglie tipografiche Synodus */
  --mono: 'JetBrains Mono', monospace;
  --display: 'Big Shoulders Display', sans-serif;
  --ritual: 'Metamorphous', serif;
  --serif: Georgia, 'Times New Roman', serif;

  /* -- easing/durate condivise (index.html + Bottega v1, gia' collaudate) */
  --ease-ui: cubic-bezier(.22, .8, .2, 1);
  --ease-reveal: cubic-bezier(.22, .9, .18, 1);
  --dur-ui: 520ms;
  --dur-reveal: 680ms;

  /* -- varianti materiche Bottega: tinte della STESSA famiglia (color-mix),
     nessuna nuova grammatica cromatica introdotta */
  --mat-bronzo-ossidato: color-mix(in srgb, var(--gold) 40%, var(--night) 60%);
  --mat-velluto-scuro: color-mix(in srgb, var(--wine) 35%, var(--night-2) 65%);
  --mat-legno-annerito: color-mix(in srgb, var(--ink-soft) 30%, var(--night) 70%);
  --mat-vetro-fume: color-mix(in srgb, var(--steel) 55%, var(--night) 45%);
  --mat-pietra: color-mix(in srgb, var(--ash) 45%, var(--paper-deep) 55%);

  --page-pad: clamp(18px, 4.5vw, 72px);
}

/* -- geometria condivisa: topbar trapezoidale (index.html .ss-system-topbar-local,
   biblioteca .top-trapezoid, Bottega v1 .ba-topbar — stesso poligono ovunque) */
.ss-trapezoid {
  clip-path: polygon(0 0, 100% 0, 94% 100%, 6% 100%);
}

/* -- texture puntinata (index.html, ripetuta su piu' sezioni) */
.ss-dotted {
  background-image: radial-gradient(rgba(242, 236, 226, .12) .7px, transparent .85px);
  background-size: 14px 14px;
}

/* -- componente medaglione base, parametrizzato via --tint (usato da anelli
   categoria, sigillo certificato, medaglione di transizione/vestibolo) */
.ss-medallion {
  --tint: var(--gold);
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--tint) 55%, transparent);
  background:
    radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--tint) 35%, transparent), transparent 60%),
    radial-gradient(circle, var(--night) 0%, var(--night-2) 70%, var(--ink) 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tint) 25%, transparent) inset,
    0 10px 30px rgba(0, 0, 0, .45);
}

@media (prefers-reduced-motion: reduce) {
  .ss-medallion, .ss-trapezoid, .ss-dotted { transition: none !important; animation: none !important; }
}