/* ─── TOKEN FOTORECORD UI SYSTEM ─────────────────────────────────────── */
:root {
  --color-primary:      #8B2635;
  --color-primary-dark: #5D0808;
  --color-accent:       #b8926d;
  --color-accent-light: #e9ded3;
  --color-bg:           #ffffff;
  --color-bg-beige:     #f8f6f4;
  --color-bg-neutral:   #e8e6e3;
  --color-bg-dark:      #4a4a4a;
  --color-text:         #2c2c2c;
  --color-text-mid:     #696969;
  --color-text-light:   #ffffff;
  --color-border:       #d9d6d0;

  /* Semantici di stato (30/07/2026) — stessi valori delle voci metaobject
     `colori_brand` su Shopify (verde-salvia, ambra, rosso-segnale, blu-info
     + varianti -chiaro), che erano gia' live: la SSOT le canonizza, non le
     reinventa. Sync/deriva: src/configuratori/sync_colori_brand_metaobjects.py */
  --color-success:      #1a5c35;
  --color-success-bg:   #e8f2ec;
  --color-warning:      #8a5a00;
  --color-warning-bg:   #fdf3d8;
  --color-error:        #b91c1c;
  --color-error-bg:     #fce8e8;
  --color-info:         #1a4a7a;
  --color-info-bg:      #e2edf8;

  /* Scrim degli overlay/modali degli strumenti interni (cruscotto, banco, ARTUR
     FRAME). Solo-app: il generatore lo ESCLUDE dall'asset del tema (la vetrina
     Dawn ha i propri overlay) e dal brand.css stampa — vedi _ESCLUDI_DA in
     genera_design_tokens.py. */
  --color-scrim:        rgba(44, 44, 44, .55);

  --font-heading: 'Zilla Slab', Georgia, serif;
  --font-body:    'Arimo', Helvetica, Arial, sans-serif;
  /* Monospace per output console/log degli strumenti interni. Solo-app lato tema
     (escluso dall'asset del tema), ma resta disponibile a stampa/PDF via brand.css. */
  --font-mono:    'Consolas', 'Courier New', Courier, monospace;

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;
  /* Contenitori di immagini che mostrano cornici, montature, pannelli o passepartout
     in legno: SEMPRE questo token (0). Il prodotto reale ha spigoli vivi, un radius
     li falsifica (regola 02/08/2026). Gli altri radius restano per la UI. */
  --radius-prodotto: 0;
  --shadow-sm: 0 2px 4px rgba(0,0,0,.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,.12);
  --shadow-lg: 0 10px 28px rgba(0,0,0,.16);

  /* Spacing scale (multipli di 4px) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;
}

/* Animations */
@keyframes fr-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes fr-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Utility per Web Components a11y */
.fr-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}