/* =========================================================
   Design Tokens — Antonella Liguori
   ========================================================= */

:root {
	/* ---------- PALETTE ---------- */
	--al-white:       #FFFFFF;
	--al-off-white:   #FAFAFA;
	--al-gray-50:     #F2F2F2;
	--al-gray-100:    #E6E6E6;
	--al-gray-300:    #BFBFBF;
	--al-gray-600:    #555555;
	--al-ink:         #1A1A1A;

	--al-blue:        #007CB8;   /* brand (logo / casetta blu / favicon) */
	--al-blue-dark:   #005F8E;

	--al-orange:      #E8632B;
	--al-teal:        #4A8B7F;
	--al-teal-dark:   #1B5E4B;
	--al-pink:        #F2B4C0;
	--al-yellow:      #F5C542;
	--al-lilac:       #C8B8E8;

	/* ---------- SEMANTIC / THEME (shift via JS) ---------- */
	--al-accent:          var(--al-blue);
	--al-accent-contrast: #ffffff;
	--al-surface:         var(--al-white);
	--al-surface-alt:     var(--al-gray-50);
	--al-text:            var(--al-ink);
	--al-text-muted:      var(--al-gray-600);

	/* ---------- TYPOGRAPHY ---------- */
	--al-font-display: "Syne", system-ui, sans-serif;
	--al-font-body:    "DM Sans", system-ui, sans-serif;

	--al-fs-xs:   0.8125rem;   /* 13 */
	--al-fs-sm:   0.9375rem;   /* 15 */
	--al-fs-base: 1.0625rem;   /* 17 */
	--al-fs-lg:   1.25rem;
	--al-fs-xl:   1.625rem;
	--al-fs-2xl:  2.25rem;
	--al-fs-3xl:  3rem;
	--al-fs-4xl:  4rem;
	--al-fs-5xl:  5.5rem;      /* hero oversize */

	--al-lh-tight: 1.05;
	--al-lh-snug:  1.2;
	--al-lh-body:  1.6;

	/* ---------- SHAPE ---------- */
	--al-radius-sm: 8px;
	--al-radius-md: 16px;
	--al-radius-lg: 24px;
	--al-radius-xl: 32px;
	--al-radius-pill: 999px;

	/* ---------- SPACE ---------- */
	--al-s-1:  0.25rem;
	--al-s-2:  0.5rem;
	--al-s-3:  0.75rem;
	--al-s-4:  1rem;
	--al-s-5:  1.5rem;
	--al-s-6:  2rem;
	--al-s-8:  3rem;
	--al-s-10: 4.5rem;
	--al-s-12: 6rem;
	--al-s-16: 8rem;

	/* ---------- SHADOWS ---------- */
	--al-shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
	--al-shadow-md: 0 4px 10px rgba(0,0,0,0.06), 0 10px 24px rgba(0,0,0,0.06);
	--al-shadow-lg: 0 12px 32px rgba(0,0,0,0.10), 0 20px 60px rgba(0,0,0,0.08);

	/* ---------- LAYOUT ---------- */
	--al-container: 1280px;
	--al-container-sm: 960px;

	/* ---------- TRANSITIONS ---------- */
	--al-ease:     cubic-bezier(0.22, 1, 0.36, 1);
	--al-dur-fast: 160ms;
	--al-dur:      280ms;
	--al-dur-slow: 520ms;
}

/* ---------- THEME VARIANTS (applicate dal theme-shifter JS) ---------- */
[data-al-theme="orange"] { --al-accent: var(--al-orange); --al-accent-contrast: #fff; }
[data-al-theme="teal"]   { --al-accent: var(--al-teal);   --al-accent-contrast: #fff; }
[data-al-theme="pink"]   { --al-accent: var(--al-pink);   --al-accent-contrast: #1a1a1a; }
[data-al-theme="yellow"] { --al-accent: var(--al-yellow); --al-accent-contrast: #1a1a1a; }
[data-al-theme="lilac"]  { --al-accent: var(--al-lilac);  --al-accent-contrast: #1a1a1a; }
[data-al-theme="blue"]   { --al-accent: var(--al-blue);      --al-accent-contrast: #fff; }
[data-al-theme="green"]  { --al-accent: var(--al-teal-dark); --al-accent-contrast: #fff; }

/* Hero house themes — 4 case illustrate (tutti token di tema) */
[data-al-theme="house-blue"]   { --al-accent: var(--al-blue);   --al-accent-contrast: #fff; }
[data-al-theme="house-green"]  { --al-accent: var(--al-teal);   --al-accent-contrast: #fff; }
[data-al-theme="house-yellow"] { --al-accent: var(--al-yellow); --al-accent-contrast: #1a1a1a; }
[data-al-theme="house-red"]    { --al-accent: var(--al-orange); --al-accent-contrast: #fff; }