/* ============================================================
   BASE — Engicam Design System
   Stili di default sugli elementi HTML + classi mirror.
   Dipende interamente da variables.css.
   
   REGOLA: qui si usano SOLO selettori elementari (h1, p, ...)
   o classi singole (.h1, .lead, ...).
   MAI selettori contestuali (.hero h1, .card p, ...) — 
   quelli vanno nei file dei componenti.
   ============================================================ */


/* ------------------------------------------------------------
   BODY — base tipografica globale
   ------------------------------------------------------------ */

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--text-secondary);
  background-color: var(--bg-page);
  overflow-x: hidden;
}


/* ------------------------------------------------------------
   TITOLI
   Stile su elemento + classe mirror per uso flessibile.
   Esempio: <p class="h2"> oppure <div class="h1">
   ------------------------------------------------------------ */

h1, .h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  color: var(--text-primary);
  letter-spacing: 0;
}

h2, .h2 {
  font-size: var(--font-size-h2);
  /* font-weight: var(--font-weight-bold); */
  line-height: var(--line-height-heading);
  color: var(--text-primary);
  letter-spacing: 0;
}

h3, .h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  color: var(--text-primary);
  letter-spacing: 0;
}

/* h4/h5/h6 non sono nel design system — li ancoriamo a h3
   così non "scappano" con dimensioni browser di default */
h4, h5, h6 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  color: var(--text-primary);
}


/* ------------------------------------------------------------
   TESTO CORRENTE
   ------------------------------------------------------------ */

p {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--text-secondary);
}

/* Classi mirror per varianti di testo */

.text-large {
  font-size: var(--font-size-body-large);
  line-height: var(--line-height-body-large);
}

.text-small {
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
}

.text-abstract {
  font-size: var(--font-size-abstract);
  line-height: var(--line-height-abstract);
  letter-spacing: var(--letter-spacing-abstract);
}

.text-nav {
  font-size: var(--font-size-nav);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-nav);
}


/* ------------------------------------------------------------
   VARIANTI COLORE TESTO
   Classi modificatrici singole, applicabili su qualsiasi elemento.
   ------------------------------------------------------------ */

.text-light    { color: var(--text-secondary); }
.text-muted    { color: var(--text-disabled); }
.text-accent   { color: var(--text-accent); }
.text-white    { color: var(--primitive-white); }
.text-inverse  { color: var(--text-inverse); }


/* ------------------------------------------------------------
   LINK
   ------------------------------------------------------------ */

a {
  color: var(--text-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover,
a:focus-visible {
  color: var(--text-accent-hover);
  text-decoration: underline;
}


/* ------------------------------------------------------------
   CLASSI BACKGROUND
   Impostano sfondo e adattano automaticamente il colore
   del testo per garantire la leggibilità.
   Da usare su section, div, o qualsiasi contenitore.

   <section class="background-dark">
     <p>Testo automaticamente chiaro</p>
   </section>
   ------------------------------------------------------------ */

.background-white {
  background-color: var(--bg-surface);
  color: var(--text-primary);
}

.background-light {
  background-color: var(--bg-section-light);
  color: var(--text-primary);
}

.background-grey {
  background-color: var(--bg-page);
  color: var(--text-primary);
}

.background-dark {
  background-color: var(--bg-section-dark);
  color: var(--text-inverse);
}

.background-dark h1, .background-dark .h1,
.background-dark h2, .background-dark .h2,
.background-dark h3, .background-dark .h3,
.background-dark h4, .background-dark h5, .background-dark h6 {
  color: var(--text-inverse);
}

.background-dark p,
.background-dark li,
.background-dark span {
  color: var(--text-inverse);
}

.background-dark a {
  color: var(--text-inverse);
}

.background-dark a:hover {
  color: var(--text-inverse-muted);
}

.background-accent {
  background-color: var(--bg-accent);
  color: var(--text-inverse);
}

.background-accent h1, .background-accent .h1,
.background-accent h2, .background-accent .h2,
.background-accent h3, .background-accent .h3,
.background-accent h4, .background-accent h5, .background-accent h6 {
  color: var(--text-inverse);
}

.background-accent p,
.background-accent li,
.background-accent span {
  color: var(--text-inverse);
}

.background-accent a {
  color: var(--text-inverse);
  text-decoration: underline;
}

.background-accent a:hover {
  color: var(--text-inverse-muted);
}

.background-black {
  background-color: var(--primitive-black);
  color: var(--text-inverse);
}

.background-black h1, .background-black .h1,
.background-black h2, .background-black .h2,
.background-black h3, .background-black .h3,
.background-black h4, .background-black h5, .background-black h6 {
  color: var(--text-inverse);
}

.background-black p,
.background-black li,
.background-black span {
  color: var(--text-inverse);
}

.background-black a {
  color: var(--text-inverse);
  text-decoration: underline;
}

.background-black a:hover {
  color: var(--text-inverse-muted);
}


/* ------------------------------------------------------------
   LISTE
   Base: nessuno stile (già resettate in reset.css).
   .list-default re-introduce bullet/numeri dove servono,
   es. dentro articoli o blocchi di testo editoriale.
   ------------------------------------------------------------ */

.list-default {
  padding-left: var(--space-6);
}

.list-default li {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

ul.list-default { list-style: disc; }
ol.list-default { list-style: decimal; }

/* Lista inline (orizzontale, es. menu, tag) */
.list-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}


/* ------------------------------------------------------------
   ELEMENTI INLINE
   ------------------------------------------------------------ */

strong, b {
  font-weight: var(--font-weight-bold);
}

em, i {
  font-style: italic;
}

small, .text-xs {
  font-size: var(--font-size-abstract);
  line-height: var(--line-height-abstract);
}

mark {
  background-color: color-mix(in srgb, var(--interactive-primary) 15%, transparent);
  color: inherit;
  padding-inline: var(--space-1);
  border-radius: var(--radius-sm);
}


/* ------------------------------------------------------------
   IMMAGINI
   ------------------------------------------------------------ */

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.img-contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.img-auto img {
  width: auto !important;
}


/* ------------------------------------------------------------
   SEPARATORI
   ------------------------------------------------------------ */

hr {
  border: none;
  border-top: 1px solid var(--border-strong);
  margin-block: var(--space-8);
}


/* ------------------------------------------------------------
   BLOCKQUOTE
   ------------------------------------------------------------ */

blockquote {
  border-left: 3px solid var(--interactive-primary);
  padding-left: var(--space-6);
  margin-inline: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-body-large);
  line-height: var(--line-height-body-large);
}


/* ------------------------------------------------------------
   CODICE
   ------------------------------------------------------------ */

code {
  font-family: ui-monospace, 'Courier New', monospace;
  font-size: 0.875em;
  background-color: var(--bg-section-light);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.4em;
  color: var(--text-primary);
}

pre {
  background-color: var(--bg-section-dark);
  color: var(--text-inverse);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-size: var(--font-size-body-small);
  line-height: 1.6;
}

pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.display-none, 
.c_d_display-none, 
.hidden, 
.class_hidden {
	display: none;
}