/* ================================================================
   FHP HR SUITE — DESIGN TOKENS
   Basato sul Brand Manual FHP 2026 v1.2 (gennaio 2026)
   Fonte ufficiale: pag. 18 (palette colori), pag. 20-21 (tipografia)
   ================================================================ */

:root {
  /* ----- COLORI BRAND CANONICI (Brand Manual pag. 18) ----- */
  --fhp-blu:           #002D72;   /* Pantone 288 C, RAL 5002 */
  --fhp-grigio:        #C6C6C6;   /* Pantone 420 C, RAL 7047 */
  --fhp-bianco:        #FFFFFF;

  /* ----- VARIANTI OPERATIVE DEL BLU FHP ----- */
  --fhp-blu-900:       #001A4D;   /* hover/pressed, header scuro */
  --fhp-blu-800:       #002457;   /* sidebar attivo */
  --fhp-blu-700:       #002D72;   /* = blu FHP base */
  --fhp-blu-600:       #1A4790;   /* hover bottoni */
  --fhp-blu-500:       #3360A8;   /* accent secondario */
  --fhp-blu-400:       #5C7DBA;
  --fhp-blu-300:       #8FA5CF;
  --fhp-blu-200:       #BCC9E2;   /* badge bg */
  --fhp-blu-100:       #DEE5F0;   /* hover bg leggero */
  --fhp-blu-50:        #EEF1F8;   /* sfondo info delicato */

  /* ----- VARIANTI OPERATIVE DEL GRIGIO FHP ----- */
  --fhp-grigio-900:    #2C2C2C;   /* testo principale */
  --fhp-grigio-800:    #4A4A4A;   /* testo secondario */
  --fhp-grigio-700:    #6B6B6B;   /* testo muted */
  --fhp-grigio-600:    #8A8A8A;
  --fhp-grigio-500:    #A8A8A8;
  --fhp-grigio-400:    #C6C6C6;   /* = grigio FHP base, bordo principale */
  --fhp-grigio-300:    #D8D8D8;   /* bordo soft */
  --fhp-grigio-200:    #E5E5E5;   /* divider */
  --fhp-grigio-100:    #F0F0F0;   /* sfondo card hover */
  --fhp-grigio-50:     #F8F8F8;   /* sfondo pagina secondaria */

  /* ----- COLORI SEMANTICI (per stati UI) ----- */
  --color-success-700: #1B7E3A;
  --color-success-500: #28A745;
  --color-success-100: #D4EDDA;
  --color-success-50:  #E8F5EC;

  --color-warning-700: #B8860B;
  --color-warning-500: #FFC107;
  --color-warning-100: #FFF3CD;
  --color-warning-50:  #FFFAE6;

  --color-danger-700:  #A0211B;
  --color-danger-500:  #DC3545;
  --color-danger-100:  #F8D7DA;
  --color-danger-50:   #FCEBEC;

  --color-info-700:    var(--fhp-blu-700);
  --color-info-500:    var(--fhp-blu-500);
  --color-info-100:    var(--fhp-blu-100);
  --color-info-50:     var(--fhp-blu-50);

  /* ----- SEMANTICA APPLICATIVA ----- */
  --bg-page:           var(--fhp-grigio-50);
  --bg-surface:        var(--fhp-bianco);
  --bg-surface-alt:    var(--fhp-grigio-100);
  --bg-sidebar:        var(--fhp-blu-700);
  --bg-sidebar-hover:  var(--fhp-blu-800);
  --bg-sidebar-active: var(--fhp-blu-900);

  --text-primary:      var(--fhp-grigio-900);
  --text-secondary:    var(--fhp-grigio-800);
  --text-muted:        var(--fhp-grigio-700);
  --text-on-primary:   var(--fhp-bianco);
  --text-link:         var(--fhp-blu-700);

  --border-default:    var(--fhp-grigio-300);
  --border-strong:     var(--fhp-grigio-400);
  --border-subtle:     var(--fhp-grigio-200);

  /* ----- TIPOGRAFIA (Brand Manual pag. 20) ----- */
  /* Font primari ufficiali FHP: Bodoni (titoli serif) + Montserrat (sans-serif) */
  /* Per UI applicativa usiamo Montserrat. Bodoni riservato a logo + branding */
  --font-sans:    'Montserrat', 'Calibri', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-serif:   'Bodoni Moda', 'Bodoni 72', Bodoni, 'Times New Roman', serif;
  --font-mono:    'SF Mono', 'Menlo', 'Monaco', 'Consolas', 'Courier New', monospace;

  --fs-xs:        11px;
  --fs-sm:        12px;
  --fs-base:      14px;
  --fs-md:        15px;
  --fs-lg:        16px;
  --fs-xl:        18px;
  --fs-2xl:       22px;
  --fs-3xl:       28px;
  --fs-4xl:       34px;

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  --lh-tight:     1.25;
  --lh-snug:      1.4;
  --lh-normal:    1.55;
  --lh-relaxed:   1.7;

  --ls-tight:     -0.01em;
  --ls-normal:    0;
  --ls-wide:      0.04em;
  --ls-wider:     0.08em;

  /* ----- SPAZIATURA (scala 4px) ----- */
  --sp-0:         0;
  --sp-1:         4px;
  --sp-2:         8px;
  --sp-3:         12px;
  --sp-4:         16px;
  --sp-5:         20px;
  --sp-6:         24px;
  --sp-7:         32px;
  --sp-8:         40px;
  --sp-9:         48px;
  --sp-10:        64px;
  --sp-11:        80px;
  --sp-12:        96px;

  /* ----- RADIUS ----- */
  --radius-sm:    4px;
  --radius-md:    6px;
  --radius-lg:    8px;
  --radius-xl:    12px;
  --radius-pill:  999px;

  /* ----- OMBRE ----- */
  --shadow-xs:    0 1px 2px rgba(0, 45, 114, 0.04);
  --shadow-sm:    0 1px 3px rgba(0, 45, 114, 0.06), 0 1px 2px rgba(0, 45, 114, 0.04);
  --shadow-md:    0 4px 8px rgba(0, 45, 114, 0.08), 0 2px 4px rgba(0, 45, 114, 0.04);
  --shadow-lg:    0 12px 24px rgba(0, 45, 114, 0.10), 0 4px 8px rgba(0, 45, 114, 0.05);
  --shadow-xl:    0 24px 48px rgba(0, 45, 114, 0.14);
  --shadow-focus: 0 0 0 3px rgba(0, 45, 114, 0.18);

  /* ----- LAYOUT ----- */
  --sidebar-w:        240px;
  --sidebar-w-mobile: 0;     /* su mobile la sidebar è offcanvas */
  --topbar-h:         60px;
  --content-max-w:    1400px;

  /* ----- MOTION ----- */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:     120ms;
  --dur-normal:   200ms;
  --dur-slow:     320ms;

  /* ----- Z-INDEX ----- */
  --z-base:       1;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    300;
  --z-modal:      400;
  --z-toast:      500;
}

/* Breakpoint helpers (utilizzati nei componenti come reference, non da media query qui) */
/* mobile:   < 640px
   tablet:   640px – 1023px
   desktop:  >= 1024px
   wide:     >= 1280px */