/* ============================================================
   HRSTE Design System - Variables
   Palette standardizzata da PIANO_ECOSISTEMA_HRSTE.md § 5
   ============================================================ */

:root {
  /* ---- Colori primari ---- */
  --primary:        #2563eb;   /* blue-600 */
  --primary-dark:   #1e40af;   /* blue-800 */
  --primary-light:  #dbeafe;   /* blue-100 */
  --accent:         #f59e0b;   /* amber-500 */
  --accent-dark:    #b45309;   /* amber-700 */

  /* ═══════════════════════════════════════════════════════════════════
     HRSTE THEME TOKENS — cambia UNA riga qui e cambi tutta la UI
     (bottoni, card-header, hero brand, fascette, tabelle header, ecc).
     Default: blu-sidebar #1e293b. Per tema alternativo (es. verde
     scuro) basta cambiare i 3 valori qui sotto.
     ═══════════════════════════════════════════════════════════════════ */
  --hrste-primary-dark:        #1e293b;   /* slate-800 (blu-sidebar) */
  --hrste-primary-dark-hover:  #0f172a;   /* slate-900 (piu' scuro per hover) */
  --hrste-primary-fg:          #ffffff;   /* testo su primary-dark */
  /* Alternative pronte (basta swap col default sopra):
     Verde scuro: #14532d + #052e16 + #ffffff  (green-900 / green-950)
     Grigio ferro: #374151 + #1f2937 + #ffffff (gray-700 / gray-800)
     Bordeaux: #7f1d1d + #450a0a + #ffffff     (red-900 / red-950)  */

  /* Danger scuro (hover btn-danger, border chip danger) */
  --danger-dark:   #b91c1c;  /* red-700 */

  /* ---- Neutrali ---- */
  --bg-app:         #f8fafc;   /* slate-50 */
  --bg-card:        #ffffff;
  --bg-sidebar:     #1e293b;   /* slate-800 */
  --bg-sidebar-hover: #334155; /* slate-700 */
  --bg-topbar:      #ffffff;

  --text-1:         #0f172a;   /* slate-900 */
  --text-2:         #64748b;   /* slate-500 */
  --text-3:         #94a3b8;   /* slate-400 */
  --text-inv:       #f1f5f9;   /* slate-100 */
  --text-inv-dim:   #cbd5e1;   /* slate-300 */

  --border:         #cbd5e1;   /* slate-300 (era slate-200 troppo chiaro/invisibile) */
  --border-strong:  #94a3b8;   /* slate-400 (era slate-300) */
  --border-soft:    #e2e8f0;   /* slate-200 — riservato a divisori interni sottili */

  /* ---- Semantici ---- */
  --success:        #10b981;   /* emerald-500 */
  --success-bg:     #d1fae5;   /* emerald-100 */
  --warning:        #f59e0b;   /* amber-500 */
  --warning-bg:     #fef3c7;   /* amber-100 */
  --danger:         #ef4444;   /* red-500 */
  --danger-bg:      #fee2e2;   /* red-100 */
  --info:           #3b82f6;   /* blue-500 */
  --info-bg:        #dbeafe;   /* blue-100 */

  /* ---- Spacing ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ---- Typography ---- */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Code", "Consolas", "Monaco", monospace;

  --fs-xs:  11px;
  --fs-sm:  13px;
  --fs-md:  14px;
  --fs-lg:  16px;
  --fs-xl:  18px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;
  --fs-4xl: 36px;

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

  --lh-tight:  1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.75;

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.12);

  /* ---- Layout ---- */
  --sidebar-width:  240px;
  --topbar-height:  56px;

  /* ---- Transitions ---- */
  --transition-fast: 120ms ease;
  --transition:      200ms ease;
}