/* ============================================================
   Job Hub Festival — Design Tokens
   ============================================================
   Strategia di ereditarietà:
   ogni token --jhf-* punta alla CSS variable VIVA del tema/Elementor
   (`--e-global-*`) con fallback ai valori brand canonici. Questo significa:

     - Se il tema cambia un colore in Elementor → Site Settings,
       il plugin lo segue automaticamente.
     - Se il tema viene sostituito, i fallback proteggono il rendering.
     - Se in futuro vorrai forzare un valore plugin-specifico, basta
       sovrascrivere la singola variabile --jhf-*.

   Tutti i nostri shortcode, blocchi Gutenberg e pagine custom
   useranno var(--jhf-*) — mai hex hardcoded.
   ============================================================ */

:root {
	/* === Brand colors === */
	--jhf-primary:        var(--e-global-color-primary,   #0D1D31);  /* navy strutturale */
	--jhf-primary-dark:   #06121F;
	--jhf-primary-soft:   #1a2d4a;  /* navy più chiaro per hover */
	--jhf-secondary:      var(--e-global-color-secondary, #EC005F);  /* magenta accento */
	--jhf-secondary-dark: #C7004F;
	--jhf-secondary-soft: #FF3380;  /* magenta più chiaro per hover (mockup) */
	--jhf-accent:         var(--e-global-color-accent,    #EC005F);

	/* === Ink === */
	--jhf-text:           var(--e-global-color-text,      #435469);
	--jhf-text-strong:    var(--e-global-color-primary,   #0D1D31);
	--jhf-text-muted:     #5B6572;  /* WCAG AA: ~5.4:1 su bianco (era #768499, 3.8:1) */
	--jhf-text-on-dark:   #E8ECF1;

	/* === Surfaces === */
	--jhf-bg:             #FAFAF7;
	--jhf-surface:        #FFFFFF;
	--jhf-surface-alt:    #F7F8FA;
	--jhf-surface-dark:   var(--e-global-color-primary,   #0D1D31);
	--jhf-border:         #E1E5EB;

	/* === States === */
	--jhf-success:        #2E8B57;
	--jhf-error:          #D93545;

	/* === Typography === */
	--jhf-font-display:   var(--e-global-typography-primary-font-family, 'Raleway'), system-ui, sans-serif;
	--jhf-font-body:      var(--e-global-typography-text-font-family,    'Raleway'), system-ui, sans-serif;

	/* === Type scale (rem da 16px base) === */
	--jhf-text-xs:        0.75rem;     /* 12 — caption */
	--jhf-text-sm:        0.875rem;    /* 14 — UI */
	--jhf-text-eyebrow:   1rem;        /* 16 — eyebrow (token sito) */
	--jhf-text-base:      1.125rem;    /* 18 — body (token sito) */
	--jhf-text-lg:        1.25rem;     /* 20 — lead */
	--jhf-text-xl:        1.375rem;    /* 22 — H3 */
	--jhf-text-2xl:       1.625rem;    /* 26 — H2 (token sito) */
	--jhf-text-3xl:       2rem;        /* 32 — H1 (token sito) */
	--jhf-text-4xl:       2.75rem;     /* 44 — display medio */
	--jhf-text-hero:      4rem;        /* 64 — display landing */

	/* === Eyebrow tokens === */
	--jhf-eyebrow-tracking: 0.156em;   /* 2.5px @ 16px (token sito) */

	/* === Spacing 4px scale === */
	--jhf-space-1: 0.25rem;
	--jhf-space-2: 0.5rem;
	--jhf-space-3: 0.75rem;
	--jhf-space-4: 1rem;
	--jhf-space-6: 1.5rem;
	--jhf-space-8: 2rem;
	--jhf-space-12: 3rem;
	--jhf-space-16: 4rem;
	--jhf-space-24: 6rem;

	/* === Radius === */
	--jhf-radius-sm:   0.5rem;
	--jhf-radius-md:   0.75rem;
	--jhf-radius-lg:   1rem;
	--jhf-radius-xl:   1.5rem;
	--jhf-radius-full: 9999px;

	/* === Shadows === */
	--jhf-shadow-sm:   0 1px 2px rgba(13, 29, 49, 0.06);
	--jhf-shadow-md:   0 6px 24px rgba(13, 29, 49, 0.08);
	--jhf-shadow-lg:   0 18px 48px rgba(13, 29, 49, 0.14);
	--jhf-shadow-btn:  0 10px 40px rgba(13, 29, 49, 0.10);  /* hover lift dei button (mockup) */
	--jhf-shadow-pink: 0 8px 24px rgba(236, 0, 95, 0.28);
}

/* Utility eyebrow — replica del token --e-global-typography-53e50c7-* del sito */
.jhf-eyebrow {
	font-family: var(--jhf-font-display);
	font-size: var(--jhf-text-eyebrow);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: var(--jhf-eyebrow-tracking);
	text-transform: uppercase;
	color: var(--jhf-secondary);
}