/* =============================================================================
   Gulliver Luxembourg — SKIN (valori dei design token).
   -----------------------------------------------------------------------------
   Questo file è "la grafica" del sito: ridefinisce SOLO i valori delle variabili
   del contratto (vedi gvn-base/assets/css/tokens.css). I componenti non vengono
   mai toccati. Per un altro brand basta un file come questo con altri valori.
   Fonte: Gulliver Brand & Design System (arancione brand + navy accento).
   I FONT (Work Sans / Courier) sono gestiti da WordPress via theme.json.
   (I token sono anche su .editor-styles-wrapper per applicarsi nell'editor.)
   ========================================================================== */

:root, body, .editor-styles-wrapper {

	/* ---- Neutri (dal brand; passi intermedi interpolati) ---- */
	--neutral-50:  #fcfcfc;
	--neutral-100: #f9f9f9;
	--neutral-200: #ededed;
	--neutral-300: #d6d6d6;
	--neutral-400: #b0b0b0;
	--neutral-500: #8e8e8e;
	--neutral-600: #6a6a6a;
	--neutral-700: #3a3b3b;
	--neutral-800: #242525;
	--neutral-900: #141515;
	--white:       #fdfeff;

	/* ---- Brand: identità = ARANCIONE ---- */
	--color-primary:        #eb583d;
	--color-primary-hover:  #d13113;
	--color-primary-subtle: #fce7e2;
	--on-primary:           #fdfeff;

	/* ---- Accento/profondità = NAVY ---- */
	--color-secondary:       #143b65;
	--color-secondary-hover: #071e37;
	--on-secondary:          #fdfeff;

	/* ---- Azione (CTA/link): in Gulliver coincide con l'arancione ---- */
	--color-action:        #eb583d;
	--color-action-hover:  #d13113;
	--color-action-subtle: #fce7e2;
	--on-action:           #fdfeff;
	/* Arancione "caldo" del brand (stop caldo del gradient): kicker su fondo scuro. */
	--accent-warm:         #eb913d;

	/* ---- Gradient di brand ---- */
	--gradient-primary:   linear-gradient(127deg, #d13113 0%, #eb583d 45%, #eb913d 100%);
	--gradient-secondary: linear-gradient(108deg, #082340 0%, #143b65 31%, #16589f 100%);
	--gradient-hero:      linear-gradient(160deg, #143b65 0%, #082340 100%);

	/* ---- Stati (Gulliver non ha i tint bg: derivati con color-mix) ---- */
	--color-success:    #28a745;  --color-success-bg: color-mix(in srgb, #28a745 12%, var(--white));
	--color-warning:    #d70040;  --color-warning-bg: color-mix(in srgb, #d70040 10%, var(--white));
	--color-error:      #d70040;  --color-error-bg:   color-mix(in srgb, #d70040 10%, var(--white));
	--color-info:       #1c7ee7;  --color-info-bg:    color-mix(in srgb, #1c7ee7 12%, var(--white));

	/* ---- Testo ---- */
	--text-primary:   #141515;
	--text-secondary: #6a6a6a;
	--text-muted:     #8e8e8e;
	--text-on-dark:   #fdfeff;
	--text-link:      var(--color-action);
	--text-link-hover: var(--color-action-hover);
	--text-accent:    var(--color-secondary);

	/* ---- Superfici ---- */
	--surface-page:   #fdfeff;
	--surface-card:   #ffffff;
	--surface-muted:  #f9f9f9;
	--surface-sunken: var(--color-primary-subtle);
	--surface-dark:   #082340;
	--surface-brand:  var(--color-primary);
	--on-surface-dark: #fdfeff;

	/* ---- Bordi & focus (glow blu di brand come focus ring) ---- */
	--border-default: #d6d6d6;
	--border-strong:  #8e8e8e;
	--divider:        #ededed;
	--border-on-dark: rgba(253, 254, 255, 0.18);
	--border-brand:   var(--color-action);
	--focus-ring-color: #1c7ee7;
	--focus-ring-width: 3px;
	--focus-ring:      0 0 0 var(--focus-ring-width) color-mix(in srgb, #1c7ee7 45%, transparent);

	/* ---- Layout ---- */
	--container: 1280px;

	/* ---- Raggi (estetica "pill" di Gulliver) ---- */
	--radius-sm:   10px;
	--radius-md:   25px;
	--radius-lg:   32px;
	--radius-xl:   32px;
	--radius-full: 9999px;

	/* ---- Ombre (md = elevazione sobria; glow = effetto di brand) ---- */
	--shadow-sm:         0 0 8px rgba(0, 0, 0, 0.08);
	--shadow-md:         0 2px 10px rgba(8, 35, 64, 0.10);
	--shadow-lg:         0 12px 32px -8px rgba(8, 35, 64, 0.20);
	--shadow-card:       0 4px 24px -8px rgba(8, 35, 64, 0.16);
	--shadow-card-hover: 0 8px 32px -8px rgba(8, 35, 64, 0.22);
	--shadow-glow:       0 0 20px 6px rgba(0, 101, 209, 0.45);

	/* ---- Tipografia: famiglie ---- */
	/* --font-body/--font-display ereditano da Work Sans (theme.json, slug "sans");
	   qui esplicitiamo solo l'accento mono. */
	--font-accent: var(--wp--preset--font-family--mono, "Courier New", monospace);

	/* ---- Tipografia: scala (ridotta per leggibilità, carattere Gulliver mantenuto) ---- */
	--fs-display: clamp(2.5rem, 6vw, 4.5rem);     /* ~72px (era 120) */
	--fs-h1:      clamp(2rem, 4.5vw, 3rem);        /* ~48px (era 70) */
	--fs-h2:      clamp(1.6rem, 3vw, 2rem);        /* ~32px (era 36) */
	--fs-h3:      1.3125rem;  /* 21px (era 24) */
	--fs-h4:      1.125rem;   /* 18px (era 20) */
	--fs-body-lg: 1.1875rem;  /* 19px (era 24) */
	--fs-body:    1.0625rem;  /* 17px (era 20) */
	--fs-caption: 0.9375rem;  /* 15px (era 18) */
	--fs-small:   0.875rem;   /* 14px (era 16) */
	--fs-micro:   0.8125rem;  /* 13px (era 14) */

	/* Work Sans caricato in 400/600/700: "medium" ricade su semibold. */
	--weight-medium: 600;

	--leading-none:   1;
	--leading-tight:  1.05;
	--leading-snug:   1.2;
	--leading-normal: 1.5;

	--tracking-tight: -0.02em;
	--tracking-wide:  0.08em;

	/* ---- Movimento ---- */
	--ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
}