/* Il tema chiaro di partenza (S08, 25/10), la vetrina: una griglia di schede composta come un prodotto
   premium (Pietro: «un pannello alla volta è uno spreco di spazio»). Aria dentro e fra le schede su una
   griglia di 8 px, ombra stratificata morbida, bordo di 1 px quasi invisibile, tipografia grande con una
   gerarchia netta, il numero chiave gigante. Solo nel chiaro: lo scuro tiene la stessa griglia con le sue
   superfici. Colori solo dai token --brand-*, testo a 16 px o più. */
:root:not([data-brand-theme='dark']) {
  --gap: 32px;
  --card-edge: color-mix(in srgb, var(--brand-text) 6%, transparent);
  --shadow:
    0 1px 1px color-mix(in srgb, var(--brand-text) 4%, transparent),
    0 4px 8px -2px color-mix(in srgb, var(--brand-text) 5%, transparent),
    0 16px 32px -12px color-mix(in srgb, var(--brand-text) 10%, transparent),
    0 40px 80px -40px color-mix(in srgb, var(--brand-text) 14%, transparent);
}
:root:not([data-brand-theme='dark']) main {
  padding-top: 48px;
  padding-bottom: 96px;
}
:root:not([data-brand-theme='dark']) .panel {
  padding: clamp(32px, 2.8vw, 40px);
  gap: 24px;
}
:root:not([data-brand-theme='dark']) .panel > h3 {
  margin-top: 8px;
}
:root:not([data-brand-theme='dark']) .panel p,
:root:not([data-brand-theme='dark']) .panel li {
  line-height: 1.6;
}
:root:not([data-brand-theme='dark']) .panel p {
  max-width: 62ch;
}
:root:not([data-brand-theme='dark']) .panel-head h2 {
  font-size: clamp(28px, 2.4vw, 40px);
}
/* Il numero chiave gigante: il punto focale della scheda. */
:root:not([data-brand-theme='dark']) .key-figure strong {
  font-size: 72px;
}
@container (min-width: 520px) {
  :root:not([data-brand-theme='dark']) .key-figure strong {
    font-size: clamp(80px, 7vw, 112px);
  }
}
/* I riquadri dentro le schede: niente filetto, un fondo carta che li stacca dal bianco. */
:root:not([data-brand-theme='dark']) .number,
:root:not([data-brand-theme='dark']) .signal-item {
  border-color: transparent;
  background: var(--brand-bg);
  padding: 24px;
}
:root:not([data-brand-theme='dark']) .numbers {
  gap: 16px;
}
:root:not([data-brand-theme='dark']) .number strong {
  font-size: 64px;
}
/* Le barre che vincono in verde fluo sul bianco (il calo resta rosso, il tenue grigio). */
:root:not([data-brand-theme='dark']) .dir-up .div-bar .fill,
:root:not([data-brand-theme='dark']) .meter-up .meter-fill {
  background: var(--brand-mark);
}
:root:not([data-brand-theme='dark']) .sector-row,
:root:not([data-brand-theme='dark']) .rank-list li {
  padding: 16px 0;
}
@media (max-width: 767px) {
  :root:not([data-brand-theme='dark']) {
    --gap: 24px;
  }
  :root:not([data-brand-theme='dark']) main {
    padding: 24px 20px 64px;
  }
  :root:not([data-brand-theme='dark']) .panel {
    padding: 24px;
  }
  :root:not([data-brand-theme='dark']) .number strong {
    font-size: 56px;
  }
}