/* =============================================
   OranguCards / OranguFest — Design System
   Theme: dark fantasy card-game aesthetic
   Fonts: Cinzel (display) + Crimson Pro (body)
   =============================================

   Il CSS è diviso in file caricati con <link> multipli (templates/base.html),
   nell'ordine in cui contano per la cascata — nessuno step di build, Whitenoise
   serve ogni file così com'è:

     1. tokens.css      — questo file: variabili in :root, nient'altro
     2. base.css         — reset, sfondo decorativo globale, focus, stati :active/is-loading
     3. layout.css        — header, nav, dropdown, footer, banner
     4. components.css    — bottoni, card, form, badge, hero generico, FAQ
     5. pages/*.css        — un file per famiglia di pagine, caricato solo dove serve
                            via {% block page_css %}

   Ogni file successivo può sovrascrivere quelli prima di lui. Le regole
   dentro ai file pages/ usano quasi sempre selettori più specifici (una
   classe di pagina in più, es. .home-page .x) o !important apposta per
   non dipendere dall'ordine — ma se aggiungi un override che si affida
   alla sola cascata, verifica in quale file "base" atterra la regola che
   stai sovrascrivendo. */

/* Fonts loaded via <link> in base.html for non-blocking delivery */

:root {
  /* Core palette — deep copper & obsidian */
  --bg:            #0d0a08;
  --bg-alt:        #130f0b;
  --surface:       #1c1410;
  --surface-mid:   #231a12;
  --surface-high:  #2e2016;

  /* fuoco-vivo (DESIGN.md): arancione pieno del logo, riservato alle
     pagine hero — vedi la regola "Fuoco vivo vs rame antico" più sotto
     e l'override in .home-page. */
  --fuoco-vivo:    #ff6a00;

  --copper:        #c87941;
  --copper-bright: #e0944f;
  --copper-glow:   rgba(200, 121, 65, 0.18);
  --copper-border: rgba(200, 121, 65, 0.30);
  --copper-dim:    rgba(200, 121, 65, 0.55);
  /* Bordo dei box a superficie (card/prose-card/form/hero e le loro varianti
     di pagina, tutte via --rule sotto) — più marcato di --copper-border
     (che resta com'era per bottoni, badge, dropdown, focus ring). Sulla
     home il bordo dell'hero-frame è comunque rinforzato ulteriormente da
     shadow/glow propri (hero-shadow, non toccato); qui si stringe solo il
     divario percepito tra la home e le pagine interne, senza copiare
     l'arancione fuoco vivo né i gradienti pesanti che restano home-only. */
  --copper-border-strong: rgba(200, 121, 65, 0.44);

  --gold:          #d4a843;
  --gold-dim:      rgba(212, 168, 67, 0.4);

  --text:          #f0e6d6;
  --text-muted:    #a8917a;
  /* Era #6b5644: ~2.5:1 su --surface-mid, sotto il 4.5:1 richiesto per testo
     normale (placeholder, hint, badge). Nuovo valore verificato ≥4.7:1 su
     --bg/--surface/--surface-mid/--surface-high. */
  --text-dim:      #a08870;

  --accent-blue:   #5aa0dd;
  --accent-green:  #6cc44a;

  --error-bg:      #2b1010;
  --error-border:  #6b2020;
  --danger-text:   #e07070;
  --success-bg:    #0d1f0f;
  --success-border:#2a5c32;
  /* conferma (DESIGN.md): testo dei messaggi di successo (.message.success);
     distinto da --accent-green, che è l'accento "Verde Jungla" per badge di
     conferma su sfondi tinti (es. .decklist-status-ok). */
  --conferma:      #70c878;

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  /* Era già usato come 999px letterale in 9 punti (badge, pillole, tag) senza
     una variabile — DESIGN.md lo documenta come rounded.pill ma tokens.css
     non lo esponeva. Aggiunto qui; i punti esistenti restano letterali (fuori
     scope di questa pulizia), i nuovi usi (spinner, scrollbar, accenti
     ornamentali ad angolo) lo referenziano. */
  --radius-pill: 999px;

  --shadow-sm:  0 3px 12px rgba(0,0,0,0.48);
  --shadow-md:  0 6px 20px rgba(0,0,0,0.55);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.65);
  --glow-copper:0 0 30px rgba(200,121,65,0.25);
  /* Ombra più morbida e profonda di shadow-md, usata dai box "vetrina"
     (branco-box, vendi-box, vendi-grazie-box) — prima rgba(0,0,0,.55)
     ripetuto identico in tre file senza nome. */
  --shadow-box: 0 8px 36px rgba(0,0,0,.55);
  /* Colore neutro dell'anello dello spinner di caricamento (.is-loading —
     base.css): deve leggersi sia su bottoni ghost trasparenti sia su bottoni
     filled color rame, quindi resta bianco translucido invece di un token
     della palette rame/nero. */
  --spinner-track: rgba(255,255,255,.35);

  /* ── Container width ────────────────────────
     Una sola larghezza per ogni pagina del sito — niente più split
     wide/text: prima .container si stringeva a --container-text (820px)
     sulle pagine di prosa via body.container-text, ma la leggibilità del
     testo è già garantita a valle da .prose-card p/ul/ol { max-width: 68ch }
     (components.css), quindi il container stesso può restare unico senza
     comprimere le pagine a griglia/form più larghi. Vedi DESIGN.md. */
  --container-wide: 1140px;

  /* Ritmo verticale tra sezioni di una pagina (hero → ornament →
     prose-card, o gap nei wrapper flex .home-page/.cs-page/.reg-page).
     Un solo valore invece di 1.25rem/1.5rem/2rem sparsi per file. */
  --section-gap: 1.25rem;

  /* Padding orizzontale dei box principali (hero, hero secondari, box di
     contenuto) — 3 livelli nominati invece di clamp() ripetuti a mano
     con cap diversi in ogni file pages/*.css. */
  --pad-x-lg: clamp(1.5rem, 4vw, 3.5rem); /* .hero (hero generico, ogni pagina) */
  --pad-x-md: clamp(1.5rem, 4vw, 3rem);   /* .cs-hero, .contacts-hero */
  --pad-x-sm: clamp(1.5rem, 4vw, 2.5rem); /* .vendi-box */

  /* Larghezza minima standard delle card in una griglia libera (numero di
     elementi non fisso: card valori, muro del branco...). Usata come base
     di .cards (components.css, minmax) e come column-width di
     .branco-jungle (chi-siamo-branco.css, masonry) — stesso valore, non
     due tagli diversi scelti a occhio in due file. Le griglie a conteggio
     fisso (4 card home, 3 step, 2 colonne contatti/vendi) non la usano:
     lì la larghezza è il container diviso per il numero di elementi, non
     un minimo — restano dimensionate dal loro layout, non da questo token. */
  --card-min-width: 250px;

  /* Larghezza della colonna laterale nei layout "form + pannello a fianco"
     (iscrizione, lista mazzo form, lista mazzo lookup) — erano 320/280/300px
     scelti singolarmente in tre file, quindi la colonna del form principale
     non era mai larga uguale tra le tre pagine pur stando nello stesso
     container. Un solo valore, la stessa colonna ovunque. */
  --sidebar-width: 300px;

  /* Stroke dei box a superficie (card/prose-card/form/hero, header, footer,
     e le loro varianti di pagina) — usa il bordo rinforzato, non il
     --copper-border "normale" usato altrove da bottoni/badge/dropdown. */
  --rule: 1px solid var(--copper-border-strong);

  /* ── Sfondo decorativo globale ──────────────
     Gradiente radiale + lineart ripetuta, dietro tutta la pagina
     (vedi .site-bg-gradient/.site-bg-lineart in base.css). Intensità
     piena di default; le pagine con form/testo lungo la abbassano con
     la classe .bg-subtle su <body>, quelle con un loro sfondo locale
     (.of-bg-*) la disattivano con .bg-none. */
  --site-bg-gradient-mid:    rgba(170,80,10,.12);
  --site-bg-gradient-hi:     rgba(200,100,0,.21);
  --site-bg-gradient-edge:   rgba(160,65,0,.32);
  --site-bg-lineart-opacity: .22;
  /* Fallback se mai mancasse l'inline style col vero asset (vedi base.html) */
  --site-bg-lineart-image:   none;
}