/* ============================================
   Romeo & Allegra - Design Tokens
   Estratti dal database del sito attuale
   ============================================ */

:root {
	/* === Brand colors === */
	--ra-mint:        #9ff5b6;   /* hero green */
	--ra-mint-dark:   #7ee59f;
	--ra-mint-soft:   #c6f5d3;

	--ra-coral:       #ff8866;   /* logo accent */
	--ra-coral-soft:  #ff827a;
	--ra-coral-light: #ffb6a4;

	/* Rosa estratto dal logo "Romeo&Allegra" — usato per footer text */
	--ra-pink-logo:      #da5262;
	--ra-pink-logo-dark: #b8424d;
	--ra-pink-logo-soft: #e07a83;

	--ra-red:         #be2a08;   /* H2 main */
	--ra-red-bright:  #ff6058;   /* CTA */
	--ra-red-hot:     #ed4b3e;
	--ra-red-deep:    #ff594b;

	--ra-navy:        #3a4c69;   /* sub-headings script */
	--ra-navy-soft:   #5f7395;
	--ra-navy-pale:   #828db1;

	--ra-purple:      #605be5;   /* pricing cards */
	--ra-purple-dark: #4a45c9;

	--ra-teal:        #62b8a8;
	--ra-tan:         #e1cbb9;
	--ra-cream:       #f8f6f4;

	--ra-text:        #444444;
	--ra-text-soft:   #6e6e6e;
	--ra-text-mute:   #7a7a7a;
	--ra-text-light:  #999999;
	--ra-line:        #e7e7e7;
	--ra-bg:          #ffffff;
	--ra-bg-alt:      #f9f9f9;

	/* === Typography === */
	--ra-font-body:    'Lato', 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	--ra-font-ui:      'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
	--ra-font-script:  'Caveat Brush', 'Caveat', cursive;
	--ra-font-logo:    'Sacramento', cursive;

	--ra-fs-base:      16px;
	--ra-lh-base:      1.65;

	/* === Spacing === */
	--ra-space-1:  4px;
	--ra-space-2:  8px;
	--ra-space-3:  12px;
	--ra-space-4:  16px;
	--ra-space-5:  24px;
	--ra-space-6:  32px;
	--ra-space-7:  48px;
	--ra-space-8:  64px;
	--ra-space-9:  96px;
	--ra-space-10: 128px;

	/* === Layout === */
	--ra-container:        1200px;
	--ra-container-narrow: 900px;
	--ra-container-wide:   1440px;
	--ra-gutter:           24px;

	/* === Radii === */
	--ra-radius-sm:  4px;
	--ra-radius-md:  8px;
	--ra-radius-lg:  16px;
	--ra-radius-xl:  24px;
	--ra-radius-pill: 999px;

	/* === Shadows === */
	--ra-shadow-sm: 0 2px 6px rgba(58, 76, 105, 0.08);
	--ra-shadow-md: 0 6px 24px rgba(58, 76, 105, 0.12);
	--ra-shadow-lg: 0 18px 48px rgba(58, 76, 105, 0.18);

	/* === Transitions === */
	--ra-transition: 0.25s ease-out;
}

@media (max-width: 768px) {
	:root {
		--ra-space-8: 48px;
		--ra-space-9: 64px;
		--ra-space-10: 80px;
	}
}