/* =============================================================
   FABLE DESIGN SYSTEM — TOKEN LAYER (copia runtime)
   Direzione D — "Infrastruttura per economie digitali" (approvata)
   ---------------------------------------------------------------
   COPIA RUNTIME — provenienza e versione:
     Derivato, senza alcuna modifica ai valori dei token, da
     docs/frontend/design-system/fable-tokens.css versione 1.0
     (22 luglio 2026, ticket FRONTEND-DESIGN-SYSTEM-001).
     Copiato in app/static/shared/design-system/ nel ticket
     FRONTEND-PUBLIC-VERTICAL-SLICE-001 (22 luglio 2026), che ha
     autorizzato per la prima volta l'uso runtime di questo file,
     limitato al solo sito pubblico (nessun collegamento al Lab in
     questo ticket). La fonte di verità narrativa/documentale resta
     docs/frontend/design-system/FABLE_DESIGN_SYSTEM_FOUNDATIONS.md.
     Qualunque modifica futura ai token va fatta prima nella copia
     sotto docs/frontend/design-system/ e poi ripetuta qui in modo
     esplicito (mai una divergenza silenziosa fra le due copie).

   Tassonomia a quattro livelli, in quest'ordine di dipendenza:
     1. PRIMITIVE  — valori grezzi, nessun significato semantico
     2. SEMANTIC   — ruolo/significato, riferisce solo primitive
     3. COMPONENT  — token per famiglia di componente, riferisce semantic
     4. SURFACE    — alias di scoping Public/Lab, riferisce semantic/component

   Font dichiarati con fallback di sistema: nessun file font è
   incluso o scaricato da questo design system (vedi §7 del
   documento delle fondamenta per la verifica di licenza).
   ============================================================= */

:root {

  /* ============================================================
     1. PRIMITIVE
     ============================================================ */

  /* -- 1.1 colore: marchio (invariabile, mai ridefinito da alias) -- */
  --fbl-p-mark: #6dc6b3;

  /* -- 1.2 colore: scala navy (foundation) -- */
  --fbl-p-navy-900: #07111f;
  --fbl-p-navy-800: #0b1a2e;
  --fbl-p-navy-700: #142943;
  --fbl-p-navy-600: #1d3a5c;

  /* -- 1.3 colore: scala ink (testo/icone su navy) -- */
  --fbl-p-ink-100: #e8eef6;
  --fbl-p-ink-300: #a8b5c7;
  --fbl-p-ink-500: #6f7f97;

  /* -- 1.4 colore: scala neutra fredda (superfici chiare) -- */
  --fbl-p-neutral-0: #ffffff;
  --fbl-p-neutral-50: #f6f8fb;
  --fbl-p-neutral-100: #eef1f6;
  --fbl-p-neutral-200: #dde3ec;
  --fbl-p-neutral-300: #c3ccd9;
  --fbl-p-neutral-600: #667186;
  --fbl-p-neutral-700: #414c5c;
  --fbl-p-neutral-900: #10151f;

  /* -- 1.5 colore: blu (due varianti non intercambiabili, vedi §6.3 fondamenta) -- */
  --fbl-p-blue-600: #1d4ed8;   /* uso: su superfici chiare */
  --fbl-p-blue-400: #60a5fa;   /* uso: su superfici scure  */

  /* -- 1.6 colore: mint operativo (uso ristretto, mai testo piccolo su chiaro) -- */
  --fbl-p-mint-500: #49e3c2;

  /* -- 1.7 colore: semantici primitivi (indipendenti dal brand) -- */
  --fbl-p-green-600: #15803d;
  --fbl-p-green-400: #4ade80;
  --fbl-p-red-600: #b91c1c;
  --fbl-p-red-400: #f87171;
  --fbl-p-amber-700: #92400e;
  --fbl-p-amber-400: #fbbf24;

  /* -- 1.8 tipografia: famiglie (self-hosting da verificare prima dell'uso reale, vedi §7) -- */
  --fbl-p-font-display: "Space Grotesk", "Trebuchet MS", ui-sans-serif, sans-serif;
  --fbl-p-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fbl-p-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* -- 1.9 tipografia: scala dimensionale (rem, base 16px) -- */
  --fbl-p-fs-000: 0.75rem;   /* 12px — caption/mono minimo   */
  --fbl-p-fs-100: 0.875rem;  /* 14px — small                */
  --fbl-p-fs-200: 1rem;      /* 16px — body                 */
  --fbl-p-fs-300: 1.125rem;  /* 18px — lede                 */
  --fbl-p-fs-400: 1.25rem;   /* 20px — h4                   */
  --fbl-p-fs-500: 1.5rem;    /* 24px — h3                   */
  --fbl-p-fs-600: 1.75rem;   /* 28px — h2                   */
  --fbl-p-fs-700: 2.25rem;   /* 36px — h1                   */
  --fbl-p-fs-800: 2.75rem;   /* 44px — display               */

  /* -- 1.10 spaziatura: multipli di 8 (recuperato da A/B, Documento 06 §2) -- */
  --fbl-p-space-1: 4px;
  --fbl-p-space-2: 8px;
  --fbl-p-space-3: 16px;
  --fbl-p-space-4: 24px;
  --fbl-p-space-5: 32px;
  --fbl-p-space-6: 48px;
  --fbl-p-space-7: 64px;
  --fbl-p-space-8: 96px;

  /* -- 1.11 radius: valore intermedio A/B (Documento 07 direzione D, §7) -- */
  --fbl-p-radius-sm: 6px;
  --fbl-p-radius-md: 10px;
  --fbl-p-radius-lg: 16px;
  --fbl-p-radius-round: 999px;

  /* -- 1.12 ombre e glow: minime, mai decorative -- */
  --fbl-p-shadow-1: 0 1px 2px rgba(16,21,31,0.06);
  --fbl-p-glow-mint: 0 0 0 1px rgba(73,227,194,0.35), 0 0 22px rgba(73,227,194,0.16);

  /* -- 1.13 motion: durate/curve -- */
  --fbl-p-duration-fast: 120ms;
  --fbl-p-duration-base: 200ms;
  --fbl-p-easing-standard: cubic-bezier(0.2, 0, 0, 1);

  /* -- 1.14 breakpoint (riferimento, non applicabili via custom property nei media query CSS,
        documentati qui per coerenza e letti dal component gallery come commento) -- */
  --fbl-p-bp-sm: 560px;
  --fbl-p-bp-md: 900px;
  --fbl-p-bp-lg: 1180px;

  /* -- 1.15 z-index: scala piatta a passi di 10 -- */
  --fbl-p-z-base: 0;
  --fbl-p-z-sticky: 10;
  --fbl-p-z-dropdown: 20;
  --fbl-p-z-overlay: 30;
  --fbl-p-z-modal: 40;
  --fbl-p-z-toast: 50;
  --fbl-p-z-tooltip: 60;

  /* ============================================================
     2. SEMANTIC — significato, mai un colore/valore "occasionale"
     ============================================================ */

  /* -- 2.1 superfici -- */
  --fbl-s-surface-canvas-light: var(--fbl-p-neutral-50);
  --fbl-s-surface-raised-light: var(--fbl-p-neutral-0);
  --fbl-s-surface-canvas-dark: var(--fbl-p-navy-900);
  --fbl-s-surface-raised-dark: var(--fbl-p-navy-800);
  --fbl-s-surface-raised-dark-2: var(--fbl-p-navy-700);

  /* -- 2.2 bordi -- */
  --fbl-s-border-light: var(--fbl-p-neutral-200);
  --fbl-s-border-light-strong: var(--fbl-p-neutral-300);
  --fbl-s-border-dark: rgba(232,238,246,0.14);
  --fbl-s-border-dark-strong: rgba(232,238,246,0.24);

  /* -- 2.3 testo -- */
  --fbl-s-text-primary-light: var(--fbl-p-neutral-900);
  --fbl-s-text-secondary-light: var(--fbl-p-neutral-700);
  --fbl-s-text-muted-light: var(--fbl-p-neutral-600);
  --fbl-s-text-primary-dark: var(--fbl-p-ink-100);
  --fbl-s-text-secondary-dark: var(--fbl-p-ink-300);
  --fbl-s-text-muted-dark: var(--fbl-p-ink-500);

  /* -- 2.4 marchio (uso ristretto: solo logo/watermark, mai testo/UI) -- */
  --fbl-s-brand-mark: var(--fbl-p-mark);

  /* -- 2.5 interattivo (due varianti obbligatoriamente distinte, mai la stessa su entrambe le superfici) -- */
  --fbl-s-interactive-on-light: var(--fbl-p-blue-600);
  --fbl-s-interactive-on-light-text: var(--fbl-p-neutral-0);
  --fbl-s-interactive-on-dark: var(--fbl-p-blue-400);
  --fbl-s-interactive-hover-on-light: #1a3fb0;

  /* -- 2.6 operativo (mint: solo su scuro o come fill con testo navy — mai testo piccolo su chiaro) -- */
  --fbl-s-operative: var(--fbl-p-mint-500);
  --fbl-s-operative-text-on-fill: var(--fbl-p-navy-800);

  /* -- 2.7 stato: informativo (riusa il blu, nessun quinto colore) -- */
  --fbl-s-info-text-on-light: var(--fbl-s-interactive-on-light);
  --fbl-s-info-text-on-dark: var(--fbl-s-interactive-on-dark);

  /* -- 2.8 stato: successo -- */
  --fbl-s-success-text-on-light: var(--fbl-p-green-600);
  --fbl-s-success-text-on-dark: var(--fbl-p-green-400);
  --fbl-s-success-bg-light: #ecfdf5;
  --fbl-s-success-border-light: #a7e8c6;
  --fbl-s-success-bg-dark: rgba(21,128,61,0.18);

  /* -- 2.9 stato: attenzione (ambra indipendente dal brand, MAI oro/gold) -- */
  --fbl-s-warning-text-on-light: var(--fbl-p-amber-700);
  --fbl-s-warning-text-on-dark: var(--fbl-p-amber-400);
  --fbl-s-warning-bg-light: #fdf3e0;
  --fbl-s-warning-border-light: #efd9a6;
  --fbl-s-warning-bg-dark: rgba(251,191,36,0.16);

  /* -- 2.10 stato: errore -- */
  --fbl-s-error-text-on-light: var(--fbl-p-red-600);
  --fbl-s-error-text-on-dark: var(--fbl-p-red-400);
  --fbl-s-error-bg-light: #fef2f2;
  --fbl-s-error-border-light: #f3bcbc;
  --fbl-s-error-bg-dark: rgba(220,38,38,0.18);

  /* -- 2.11 focus (sempre distinto dal solo colore interattivo) -- */
  --fbl-s-focus-ring-light: 0 0 0 3px rgba(29,78,216,0.4);
  --fbl-s-focus-ring-dark: 0 0 0 3px rgba(96,165,250,0.5);

  /* -- 2.12 tipografia: ruoli -- */
  --fbl-s-type-display: 700 var(--fbl-p-fs-800)/1.15 var(--fbl-p-font-display);
  --fbl-s-type-h1: 600 var(--fbl-p-fs-700)/1.2 var(--fbl-p-font-display);
  --fbl-s-type-h2: 600 var(--fbl-p-fs-600)/1.25 var(--fbl-p-font-display);
  --fbl-s-type-h3: 600 var(--fbl-p-fs-500)/1.3 var(--fbl-p-font-display);
  --fbl-s-type-h4: 600 var(--fbl-p-fs-400)/1.35 var(--fbl-p-font-body);
  --fbl-s-type-body: 400 var(--fbl-p-fs-200)/1.6 var(--fbl-p-font-body);
  --fbl-s-type-small: 400 var(--fbl-p-fs-100)/1.5 var(--fbl-p-font-body);
  --fbl-s-type-caption: 500 var(--fbl-p-fs-000)/1.4 var(--fbl-p-font-body);
  --fbl-s-type-mono-data: 500 var(--fbl-p-fs-100)/1.4 var(--fbl-p-font-mono);

  /* -- 2.13 spaziatura: ruoli (inset = padding interno, stack = margine verticale) -- */
  --fbl-s-inset-sm: var(--fbl-p-space-2);
  --fbl-s-inset-md: var(--fbl-p-space-3);
  --fbl-s-inset-lg: var(--fbl-p-space-4);
  --fbl-s-stack-sm: var(--fbl-p-space-3);
  --fbl-s-stack-md: var(--fbl-p-space-5);
  --fbl-s-stack-lg: var(--fbl-p-space-7);
  --fbl-s-section-padding: var(--fbl-p-space-8);

  /* -- 2.14 radius: ruoli -- */
  --fbl-s-radius-control: var(--fbl-p-radius-sm);
  --fbl-s-radius-card: var(--fbl-p-radius-md);
  --fbl-s-radius-container: var(--fbl-p-radius-lg);
  --fbl-s-radius-pill: var(--fbl-p-radius-round);

  /* -- 2.15 ombre: ruoli (nessuna ombra pesante su nessuna superficie) -- */
  --fbl-s-elevation-1: var(--fbl-p-shadow-1);   /* solo su chiaro, minima */
  --fbl-s-elevation-glow: var(--fbl-p-glow-mint); /* solo su scuro, stato attivo/verificato */

  /* -- 2.16 motion: ruoli -- */
  --fbl-s-motion-control: var(--fbl-p-duration-fast) var(--fbl-p-easing-standard);
  --fbl-s-motion-panel: var(--fbl-p-duration-base) var(--fbl-p-easing-standard);

  /* -- 2.17 z-index: ruoli (identici alle primitive, mappatura 1:1 dichiarata per leggibilità) -- */
  --fbl-s-z-header: var(--fbl-p-z-sticky);
  --fbl-s-z-dropdown: var(--fbl-p-z-dropdown);
  --fbl-s-z-overlay: var(--fbl-p-z-overlay);
  --fbl-s-z-modal: var(--fbl-p-z-modal);
  --fbl-s-z-toast: var(--fbl-p-z-toast);
  --fbl-s-z-tooltip: var(--fbl-p-z-tooltip);


  /* ============================================================
     3. COMPONENT — famiglia di componente, riferisce solo semantic
     ============================================================ */

  /* -- 3.1 bottone -- */
  --fbl-c-button-radius: var(--fbl-s-radius-control);
  --fbl-c-button-padding-y: 10px;
  --fbl-c-button-padding-x: 18px;
  --fbl-c-button-primary-bg-light: var(--fbl-s-interactive-on-light);
  --fbl-c-button-primary-text-light: var(--fbl-s-interactive-on-light-text);
  --fbl-c-button-primary-bg-dark: var(--fbl-s-operative);
  --fbl-c-button-primary-text-dark: var(--fbl-s-operative-text-on-fill);
  --fbl-c-button-min-target: 44px; /* target touch minimo, WCAG 2.5.5/2.5.8 */

  /* -- 3.2 campo input / select -- */
  --fbl-c-field-radius: var(--fbl-s-radius-control);
  --fbl-c-field-border-light: var(--fbl-s-border-light-strong);
  --fbl-c-field-border-dark: var(--fbl-s-border-dark-strong);
  --fbl-c-field-bg-dark: var(--fbl-p-navy-900);
  --fbl-c-field-min-target: 44px;

  /* -- 3.3 card -- */
  --fbl-c-card-radius: var(--fbl-s-radius-card);
  --fbl-c-card-padding: var(--fbl-s-inset-lg);
  --fbl-c-card-border-light: var(--fbl-s-border-light);
  --fbl-c-card-border-dark: var(--fbl-s-border-dark);

  /* -- 3.4 badge/pill -- */
  --fbl-c-badge-radius: var(--fbl-s-radius-pill);
  --fbl-c-badge-padding-y: 2px;
  --fbl-c-badge-padding-x: 10px;
  --fbl-c-badge-font: var(--fbl-s-type-mono-data);

  /* -- 3.5 alert -- */
  --fbl-c-alert-radius: var(--fbl-s-radius-card);
  --fbl-c-alert-padding: var(--fbl-s-inset-md);

  /* -- 3.6 tabella -- */
  --fbl-c-table-row-padding: var(--fbl-s-inset-sm);
  --fbl-c-table-header-font: var(--fbl-s-type-caption);

  /* -- 3.7 modal/dialog -- */
  --fbl-c-modal-radius: var(--fbl-s-radius-container);
  --fbl-c-modal-max-width: 480px;
  --fbl-c-modal-z: var(--fbl-s-z-modal);

  /* -- 3.8 toast -- */
  --fbl-c-toast-radius: var(--fbl-s-radius-card);
  --fbl-c-toast-z: var(--fbl-s-z-toast);
  --fbl-c-toast-max-width: 360px;

  /* -- 3.9 tooltip -- */
  --fbl-c-tooltip-radius: var(--fbl-s-radius-control);
  --fbl-c-tooltip-z: var(--fbl-s-z-tooltip);
  --fbl-c-tooltip-bg: var(--fbl-p-navy-900);
  --fbl-c-tooltip-text: var(--fbl-p-ink-100);

  /* -- 3.10 skeleton/loading -- */
  --fbl-c-skeleton-base-dark: rgba(232,238,246,0.08);
  --fbl-c-skeleton-shine-dark: rgba(232,238,246,0.18);
  --fbl-c-skeleton-base-light: var(--fbl-p-neutral-100);
  --fbl-c-skeleton-shine-light: var(--fbl-p-neutral-200);

  /* -- 3.11 dato numerico/monetario (vedi §9 fondamenta per le regole complete) -- */
  --fbl-c-data-font: var(--fbl-s-type-mono-data);
  --fbl-c-data-positive: var(--fbl-s-success-text-on-dark);
  --fbl-c-data-negative: var(--fbl-s-error-text-on-dark);


  /* ============================================================
     4. SURFACE ALIASES — scoping Public / Lab
     Nessun nuovo colore: solo riferimenti ai livelli precedenti,
     con parametri di densità/contesto differenti.
     ============================================================ */

  /* -- 4.1 Public: prevalentemente chiaro, densità bassa-media -- */
  --fbl-public-bg: var(--fbl-s-surface-canvas-light);
  --fbl-public-surface: var(--fbl-s-surface-raised-light);
  --fbl-public-text: var(--fbl-s-text-primary-light);
  --fbl-public-interactive: var(--fbl-s-interactive-on-light);
  --fbl-public-section-padding: var(--fbl-s-section-padding);
  --fbl-public-container-max: 1180px;
  --fbl-public-technical-bg: var(--fbl-s-surface-canvas-dark); /* per le sezioni tecniche navy nel sito pubblico */
  --fbl-public-technical-text: var(--fbl-s-text-primary-dark);

  /* -- 4.2 Lab: prevalentemente navy, densità media (non trading-terminal) -- */
  --fbl-lab-bg: var(--fbl-s-surface-canvas-dark);
  --fbl-lab-shell-bg: var(--fbl-s-surface-raised-dark);
  --fbl-lab-panel-bg: var(--fbl-s-surface-raised-dark-2);
  --fbl-lab-text: var(--fbl-s-text-primary-dark);
  --fbl-lab-interactive-primary: var(--fbl-s-operative);      /* mint: firma operativa del Lab */
  --fbl-lab-interactive-secondary: var(--fbl-s-interactive-on-dark); /* blu chiaro: link/azioni secondarie */
  --fbl-lab-nav-width: 200px;
  --fbl-lab-row-padding: var(--fbl-s-inset-sm); /* densità media: non compressa come un terminale, non ariosa come il sito pubblico */
  --fbl-lab-container-max: 1180px;
}

/* =============================================================
   Accessibilità trasversale — non un token di colore, ma una
   regola di sistema che ogni componente deve rispettare.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}