/* ===== CSS CUSTOM PROPERTIES - ROVI 2025 ===== */
/* Single Source of Truth for all design tokens */

:root {
  /* ===== ROVI BRAND COLORS ===== */
  --color-primary: #101e19;          /* Verde Scuro ROVI */
  --color-secondary: #EA5F47;        /* Arancione Corallo ROVI */
  --color-accent: #E8446A;           /* Rosso/Rosa ROVI - goccia logo */
  --color-highlight: #D34A32;        /* Coral hover state */

  /* ===== 2025 GRADIENT COLORS ===== */
  --gradient-primary: linear-gradient(135deg, var(--color-secondary) 0%, #FF7F50 50%, var(--color-accent) 100%);
  --gradient-secondary: linear-gradient(45deg, var(--color-primary) 0%, #1a2f23 50%, #0d1814 100%);
  --gradient-accent: linear-gradient(135deg, #FF6B6B 0%, var(--color-accent) 50%, #FF8E53 100%);
  --gradient-subtle: linear-gradient(135deg, rgba(234, 95, 71, 0.1) 0%, rgba(232, 68, 106, 0.1) 100%);
  --gradient-text: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-secondary) 100%);

  /* ===== TEXT COLORS ===== */
  --color-text-primary: #1B4D3E;     /* Verde scuro per testo principale */
  --color-text-secondary: #4A6B5F;   /* Verde medio per testo secondario */
  --color-text-muted: #6B7B73;       /* Verde chiaro per testo muted */
  --color-text-inverse: #ffffff;     /* Bianco per testo su sfondi scuri */

  /* ===== BACKGROUND COLORS ===== */
  --color-bg-primary: #ffffff;       /* Bianco principale */
  --color-bg-secondary: #F0F5F3;     /* Forest-50 per sezioni alternate */
  --color-bg-tertiary: #FFF7F5;      /* Coral-50 per cards speciali */
  --color-bg-coral: #EA5F47;         /* Arancione corallo per sezioni energiche */
  --color-bg-dark: #101e19;          /* Verde scuro per header/footer */

  /* ===== BORDER COLORS ===== */
  --color-border-light: #E6EDE9;     /* Verde molto chiaro per bordi sottili */
  --color-border-medium: #C5D4CB;    /* Verde chiaro per bordi medi */
  --color-border-dark: #4A6B5F;      /* Verde medio per bordi scuri */
  --color-border-coral: #F2A596;     /* Coral chiaro per bordi speciali */

  /* ===== SPACING SCALE ===== */
  --space-xs: 0.4rem;
  --space-sm: 0.8rem;
  --space-md: 1.6rem;
  --space-lg: 2.4rem;
  --space-xl: 3.2rem;
  --space-2xl: 4.8rem;
  --space-3xl: 6.4rem;
  --space-4xl: 9.6rem;

  /* ===== TYPOGRAPHY SCALE ===== */
  --font-size-xs: 1.2rem;
  --font-size-sm: 1.4rem;
  --font-size-base: 1.6rem;
  --font-size-lg: 1.8rem;
  --font-size-xl: 2.2rem;
  --font-size-2xl: 2.8rem;
  --font-size-3xl: 3.6rem;
  --font-size-4xl: 5.2rem;
  --font-size-5xl: 7.2rem;
  --font-size-6xl: 9.6rem;

  /* ===== FONT WEIGHTS ===== */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ===== FONT STACKS ===== */
  --font-body: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --font-heading: 'Comfortaa', 'Comfortaa Fallback', ui-rounded, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'SF Mono', 'Consolas', 'Liberation Mono', 'Menlo', monospace;

  /* ===== FONT RENDERING ===== */
  --font-optical-sizing: auto;
  --font-kerning: auto;

  /* ===== LINE HEIGHTS ===== */
  --line-height-tight: 1.1;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.6;

  /* ===== BORDER RADIUS ===== */
  --radius-sm: 0.6rem;
  --radius-md: 0.8rem;
  --radius-lg: 1.2rem;
  --radius-xl: 1.6rem;
  --radius-full: 999rem;

  /* ===== SHADOWS ===== */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 20px 25px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.25);

  /* ===== TRANSITIONS ===== */
  --transition-fast: 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
  --transition-normal: 500ms cubic-bezier(0.4, 0.0, 0.2, 1);
  --transition-slow: 700ms cubic-bezier(0.4, 0.0, 0.2, 1);
  --transition-bounce: 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-smooth: 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-silk: 350ms cubic-bezier(0.645, 0.045, 0.355, 1);

  /* ===== CONTAINER SIZES ===== */
  --container-sm: 64rem;
  --container-md: 76.8rem;
  --container-lg: 102.4rem;
  --container-xl: 128rem;
  --container-2xl: 140rem;

  /* ===== RESPONSIVE BREAKPOINTS ===== */
  --breakpoint-xs: 20rem;      /* 320px */
  --breakpoint-sm: 30rem;      /* 480px */
  --breakpoint-md: 48rem;      /* 768px */
  --breakpoint-lg: 64rem;      /* 1024px */
  --breakpoint-xl: 80rem;      /* 1280px */
  --breakpoint-2xl: 96rem;     /* 1536px */
}