/* ============================================================
   CANNONI CONRAD · DESIGN TOKENS v2.0 (brandbook v2.0, 13/09/2026)
   Fonte di verità: cannoni-conrad-brandbook-v2_0.html
   Mai hex o radius hard-coded nei componenti: solo var(--cc-*)
   ============================================================ */
:root{
  /* Font (Google Fonts: Audiowide, Archivo Black, Prompt 300-700) */
  --cc-font-logo:    "Audiowide",sans-serif;                          /* SOLO wordmark */
  --cc-font-display: "Archivo Black","Arial Black",sans-serif;        /* H1/H2 uppercase */
  --cc-font-body:    "Prompt","Helvetica Neue",Arial,sans-serif;      /* tutto il resto */
  --cc-h1: clamp(2.2rem,5vw,3.6rem);
  --cc-h2: clamp(1.6rem,3.5vw,2.4rem);

  /* Colori brand */
  --cc-accent:         #FE3F12;
  --cc-accent-hover:   #E5380F;   /* solo hover bottoni */
  --cc-accent-pressed: #C93009;   /* solo active bottoni */
  --cc-accent-dark:    #FF6038;   /* accento su sfondo nero (badge, "+", kicker) */
  --cc-accent-soft:    #FFF3EF;   /* sfondo tenue per stati/evidenze su chiaro */
  --cc-black:          #000000;   /* sezioni dark, footer, form */
  --cc-dark:           #141414;   /* hero, header */
  --cc-panel:          #1F1F1F;   /* card e pannelli su dark */
  --cc-line-dark:      #333333;   /* bordi e separatori su dark */
  --cc-ink:            #212121;   /* testo su chiaro */
  --cc-ink-2:          #4A4A4A;   /* testo secondario su chiaro */
  --cc-surface:        #F5F5F7;   /* sfondo sezioni chiare */
  --cc-surface-alt:    #FAFAFA;   /* righe alternate, varianti */
  --cc-border:         #EDEDED;   /* bordi card, separatori */
  --cc-field-border:   #E0E0E0;   /* bordo input su chiaro */
  --cc-white:          #FFFFFF;
  --cc-muted:          #9A9A9A;   /* hint, caption, date su chiaro */
  --cc-muted-dark:     #8C8C8C;   /* hint, caption su dark */
  --cc-text-dark-2:    #CACACA;   /* paragrafi su dark */

  /* Stati (unico uso ammesso di verde/giallo/rosso) */
  --cc-success:     #16A34A; --cc-success-bg: #E8F5E9; --cc-success-txt: #166534;
  --cc-warning:     #E6B800; --cc-warning-bg: #FFF8E6; --cc-warning-txt: #8A6A0A;
  --cc-error:       #DC2626; --cc-error-bg:   #FDECEA; --cc-error-dark:  #FF6B6B;

  /* Radius (scala unica 10/20/28/999) */
  --cc-radius-badge: 10px;   /* badge, input, alert */
  --cc-radius-card:  20px;   /* card, media frame, tabelle */
  --cc-radius-block: 28px;   /* form, blocco accent, hero box */
  --cc-radius-pill:  999px;  /* bottoni, pill, chip */

  /* Layout */
  --cc-container: 1140px;
  --cc-section-y: 96px;      /* 64px sotto 640px */
  --cc-grid-gap:  20px;

  /* Effetti e motion */
  --cc-shadow-card:  0 2px 10px rgba(20,20,20,.04);
  --cc-overlay-hero: rgba(0,0,0,.55);
  --cc-overlay-card: linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.6) 100%);
  --cc-motion-micro: 200ms;
  --cc-ease: cubic-bezier(.22,1,.36,1);
}
@media (max-width:640px){ :root{ --cc-section-y:64px } }