@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700;800;900&display=swap');

/**
 * shared/design/tokens.css — ECS Internal Tools canonical design tokens
 *
 * Single source of truth per tutti i moduli. Copia editoriale di
 * docs/design-tokens.css §1 (CSS CUSTOM PROPERTIES), versionata in
 * shared/ per essere importata da tutti i moduli via HTTP:
 *
 *   <link rel="stylesheet" href="/design/tokens.css">
 *
 * Ogni modulo che espone shared/design come static (vedi README.md)
 * può usare queste variabili in qualsiasi <style> successivo.
 *
 * NON contiene reset/componenti/layout — solo TOKENS.
 * Reset e componenti (se servono in futuro) andranno in file separati.
 *
 * Versione: Round 3 Wave 2 — aprile 2026
 */

:root {
  /* Brand — arancione ECS (valore reale nei moduli, sostituisce il rosso
     aspirazionale #C0392B dell'audit Fase 1). */
  --color-primary:        #e64b38;
  --color-primary-dark:   #c9402f;
  --color-primary-light:  #fdf0ee;
  --orange:               #e64b38;  /* alias storico, già presente in molti moduli */

  /* Superfici */
  --color-bg:             #F8F9FA;
  --color-surface:        #FFFFFF;
  --color-surface-2:      #F1F3F5;
  --color-border:         #E5E7EB;
  --color-border-strong:  #D1D5DB;

  /* Testo */
  --color-text:           #111827;
  --color-text-secondary: #374151;
  --color-text-muted:     #6B7280;
  --color-text-disabled:  #9CA3AF;

  /* Semantici (success / warning / danger / info) ciascuno con base + bg + border */
  --color-success:        #059669;
  --color-success-bg:     #ECFDF5;
  --color-success-border: #A7F3D0;
  --color-warning:        #D97706;
  --color-warning-bg:     #FFFBEB;
  --color-warning-border: #FDE68A;
  --color-danger:         #DC2626;
  --color-danger-bg:      #FEF2F2;
  --color-danger-border:  #FECACA;
  --color-info:           #2563EB;
  --color-info-bg:        #EFF6FF;
  --color-info-border:    #BFDBFE;

  /* Grafici — palette ordinata per Chart.js (vedi brand-guide §GRAFICI). */
  --chart-1: #2563EB;   /* blu */
  --chart-2: #059669;   /* verde */
  --chart-3: #D97706;   /* arancio */
  --chart-4: #7C3AED;   /* viola */
  --chart-5: #DC2626;   /* rosso */
  --chart-6: #0891B2;   /* ciano */
  --chart-7: #65A30D;   /* lime */
  --chart-8: #9F1239;   /* rosa scuro */

  /* Tipografia — Figtree primary (Round 8.6), system fallback for offline */
  --font-sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-tabular: 'Figtree', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-feature-tabular: "tnum" 1, "lnum" 1;
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

  --text-xs:   11px;   /* caption, label piccola */
  --text-sm:   12px;   /* label, badge */
  --text-base: 14px;   /* corpo testo standard */
  --text-md:   15px;   /* testo leggermente più grande */
  --text-lg:   16px;   /* titoli sezione */
  --text-xl:   20px;   /* titoli card */
  --text-2xl:  24px;   /* KPI valore */
  --text-3xl:  32px;   /* KPI valore grande */
  --text-4xl:  40px;   /* hero number */

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Spaziatura (base 4px) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Border radius */
  --radius-sm: 4px;    /* badge, pill piccola */
  --radius:    6px;    /* card, input */
  --radius-md: 8px;    /* card principale */
  --radius-lg: 12px;   /* modal, drawer */
  --radius-xl: 16px;

  /* Ombre */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow:    0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);

  /* Transizioni */
  --transition:      150ms ease;
  --transition-slow: 250ms ease;
}

/* ──────────────────────────────────────────────────────────────────────────
   Body default — Figtree everywhere unless a child overrides explicitly.
   Round 8.6: replaces the system-fallback font that varied by OS. */
html, body {
  font-family: var(--font-sans);
}

/* Tabular numerics — Round 8.6.
   Forces fixed-width digits on KPI values, table numeric cells, mono data.
   Use class `text-mono` (already in many pages) or `metric-value`/`severity-value`
   for new code. Combined with .data-table td.text-right gives perfect column align. */
.kpi-value,
.kpi-delta,
.kpi-mini-value,
.data-table td.text-right,
.data-table td.mono,
.text-mono,
.metric-value,
.severity-value {
  font-family: var(--font-tabular);
  font-feature-settings: var(--font-feature-tabular);
  font-variant-numeric: tabular-nums;
  font-stretch: normal;
}

/* Section icon helper for navbar/dashboard headings — used in Phase 4 sweep. */
.section-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: -3px;
  margin-right: 6px;
  color: var(--color-primary);
  stroke-width: 2;
}

/* Lucide icon helpers — Round 8.6 Phase 4. */
.sub-icon-lucide {
  width: 16px;
  height: 16px;
  display: inline-block;
  flex-shrink: 0;
  color: var(--color-primary);
  stroke-width: 2;
}
/* When Lucide replaces a card-icon emoji, scale the SVG to the card font size. */
.card-icon svg,
.card-icon [data-lucide] {
  width: 30px;
  height: 30px;
  color: var(--color-primary);
  stroke-width: 1.75;
  display: inline-block;
}

/* Status dots — Round 8.6 Phase 4 (replaces colored-circle emoji indicators). */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}
.dot-success { background: var(--color-success); }
.dot-warning { background: var(--color-warning); }
.dot-danger  { background: var(--color-danger); }
.dot-info    { background: var(--color-info); }
.dot-muted   { background: var(--color-text-muted); }