/* ============================================================================
   FRONT THEME - MEGAPARTY
   ============================================================================ */

:root {
  /* ============================================= */
  /* 1. PRIMARY COLORS - VERDE BRAND MEGAPARTY    */
  /* ============================================= */
  --primary-color: #55aa00;
  /* Verde brand principale */
  --primary-color-hover: #4a9500;
  /* Verde hover */
  --primary-color-bg-hover: #e8f7e0;
  /* Verde super chiaro per sfondi */
  --primary-color-dark: #3d8500;
  /* Verde scuro */
  --primary-color-light: #7bc143;
  /* Verde chiaro */
  --primary-color-lighter: #e8f7e0;
  /* Verde super chiaro */
  --primary-alpha-02: rgba(85, 170, 0, 0.02);
  --primary-alpha-04: rgba(85, 170, 0, 0.04);
  --primary-alpha-08: rgba(85, 170, 0, 0.08);
  --primary-alpha-10: rgba(85, 170, 0, 0.1);
  --primary-alpha-12: rgba(85, 170, 0, 0.12);
  --primary-alpha-20: rgba(85, 170, 0, 0.2);
  --primary-alpha-25: rgba(85, 170, 0, 0.25);
  --primary-alpha-30: rgba(85, 170, 0, 0.3);
  --primary-alpha-40: rgba(85, 170, 0, 0.4);
  --primary-alpha-50: rgba(85, 170, 0, 0.5);
  --primary-color-alpha-20: var(--primary-alpha-20);

  /* ============================================= */
  /* 2. SECONDARY & ACCENT                         */
  /* ============================================= */
  --secondary-color: #7bc143;
  /* Verde lime secondario */
  --secondary-color-light: #e5fbea;
  /* Verde super chiaro */

  /* ============================================= */
  /* 3. SUCCESS COLORS - STESSO VERDE BRAND       */
  /* ============================================= */
  --success-color: #55aa00;
  /* Verde brand = success */
  --success-color-hover: #4a9500;
  /* Verde hover */
  --success-color-light: #7bc143;
  /* Verde chiaro */
  --success-color-lighter: #e8f7e0;
  /* Verde super chiaro */
  --success-alpha-10: rgba(85, 170, 0, 0.1);

  /* ============================================= */
  /* 4. DANGER COLORS - ROSSO COMPLEMENTARE       */
  /* ============================================= */
  --danger-color: #dc2626;
  /* Rosso (manteniamo standard) */
  --danger-color-hover: #b91c1c;
  --danger-color-light: #ef4444;
  --danger-color-lighter: #fee2e2;
  --danger-alpha-05: rgba(220, 38, 38, 0.05);
  --danger-alpha-10: rgba(220, 38, 38, 0.1);
  --danger-alpha-20: rgba(220, 38, 38, 0.2);
  --danger-alpha-25: rgba(220, 38, 38, 0.25);

  /* ============================================= */
  /* 5. WARNING COLORS - ARANCIONE ENERGICO       */
  /* ============================================= */
  --warning-color: #d97706;
  /* Arancione */
  --warning-color-hover: #b45309;
  --warning-color-light: #f59e0b;
  --warning-color-lighter: #fff3cd;
  --warning-alpha-10: rgba(217, 119, 6, 0.1);
  --warning-alpha-20: rgba(217, 119, 6, 0.2);
  --warning-alpha-25: rgba(217, 119, 6, 0.25);

  /* ============================================= */
  /* 6. INFO COLORS - BLU FRESCO                  */
  /* ============================================= */
  --info-color: #0891b2;
  /* Cyan */
  --info-color-hover: #0e7490;
  --info-color-light: #06b6d4;
  --info-color-lighter: #cffafe;
  --info-alpha-10: rgba(8, 145, 178, 0.1);
  --info-alpha-15: rgba(8, 145, 178, 0.15);
  --info-alpha-25: rgba(8, 145, 178, 0.25);

  /* ============================================= */
  /* 7. GRAYSCALE - NEUTRO PULITO                 */
  /* ============================================= */
  --gray-25: #fcfcfd;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Grayscale Alpha Variants */
  --gray-50-alpha-30: rgba(249, 250, 251, 0.3);
  --gray-50-alpha-50: rgba(249, 250, 251, 0.5);
  --gray-900-alpha-02: rgba(0, 0, 0, 0.02);
  --gray-900-alpha-04: rgba(0, 0, 0, 0.04);
  --gray-900-alpha-05: rgba(0, 0, 0, 0.05);
  --gray-900-alpha-07: rgba(0, 0, 0, 0.07);
  --gray-900-alpha-08: rgba(0, 0, 0, 0.08);
  --gray-900-alpha-10: rgba(0, 0, 0, 0.1);
  --gray-900-alpha-12: rgba(0, 0, 0, 0.12);
  --gray-900-alpha-15: rgba(0, 0, 0, 0.15);
  --gray-900-alpha-20: rgba(0, 0, 0, 0.2);
  --gray-900-alpha-25: rgba(0, 0, 0, 0.25);
  --gray-900-alpha-30: rgba(0, 0, 0, 0.3);
  --gray-900-alpha-40: rgba(0, 0, 0, 0.4);
  --gray-900-alpha-50: rgba(0, 0, 0, 0.5);
  --gray-900-alpha-60: rgba(0, 0, 0, 0.6);
  --gray-900-alpha-70: rgba(0, 0, 0, 0.7);
  --gray-900-alpha-75: rgba(0, 0, 0, 0.75);
  --gray-900-alpha-90: rgba(0, 0, 0, 0.9);

  /* ============================================= */
  /* 8. WHITE ALPHA VARIANTS                       */
  /* ============================================= */
  --white-alpha-10: rgba(255, 255, 255, 0.1);
  --white-alpha-20: rgba(255, 255, 255, 0.2);
  --white-alpha-30: rgba(255, 255, 255, 0.3);
  --white-alpha-95: rgba(255, 255, 255, 0.95);
  --bg-white-alpha-10: var(--white-alpha-10);
  --bg-white-alpha-20: var(--white-alpha-20);
  --bg-white-alpha-30: var(--white-alpha-30);
  --bg-white-alpha-95: var(--white-alpha-95);

  /* ============================================= */
  /* 9. SEMANTIC - Background FRESCHI             */
  /* ============================================= */
  --bg-body: #f9fafb;
  /* Sfondo body chiaro */
  --bg-surface: #ffffff;
  /* Bianco puro */
  --bg-surface-hover: var(--gray-50);
  --bg-secondary: var(--gray-100);
  --bg-white: #ffffff;

  /* ============================================= */
  /* 10. SEMANTIC - Text                           */
  /* ============================================= */
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-tertiary: var(--gray-500);
  --text-muted: var(--gray-400);
  --text-heading: #0f172a;
  --text-inverse: #ffffff;
  --text-link: #55aa00;
  /* Link verde brand */
  --text-link-hover: #4a9500;

  /* ============================================= */
  /* 11. BORDERS                                   */
  /* ============================================= */
  --border-color: var(--gray-200);
  --border-light: var(--gray-100);
  --border-dark: var(--gray-300);

  /* ============================================= */
  /* 12. OVERLAY                                   */
  /* ============================================= */
  --overlay-bg: rgba(15, 23, 42, 0.4);

  /* ============================================= */
  /* 13. BORDER RADIUS - LEGGERMENTE PIÙ ARROTONDATI */
  /* ============================================= */
  --radius-xs: 5px;
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 9999px;

  /* ============================================= */
  /* 14. SHADOWS - CON TOCCO VERDE                */
  /* ============================================= */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(85, 170, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 6px -1px rgba(85, 170, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 15px -3px rgba(85, 170, 0, 0.12), 0 4px 6px -4px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 20px 25px -5px rgba(85, 170, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.08);

  /* ============================================= */
  /* 15. HEADER COMPONENT - VERDE BRAND           */
  /* ============================================= */
  --hdr-bg: var(--hdr-bg-primary);
  --hdr-bg-primary: #55aa00;
  /* Verde brand header */
  --hdr-bg-secondary: #4a9500;
  /* Verde hover header */
  --hdr-accent: #2d5c00;
  /* Verde SCURO per highlight bar */
  --hdr-text: #ffffff;
  /* Bianco */
  --hdr-text-muted: #e8f7e0;
  /* Verde chiaro */
  --hdr-shadow: rgba(85, 170, 0, 0.3);

  /* ============================================= */
  /* 18. CARDS                                     */
  /* ============================================= */
  --card-bg: var(--bg-surface);
  --card-border: var(--border-color);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: 0 8px 16px rgba(85, 170, 0, 0.12);

  /* ============================================= */
  /* 17. SIDEBAR & FILTERS                         */
  /* ============================================= */
  --filter-badge-bg: var(--danger-color);
  --filter-badge-text: var(--text-inverse);

  /* ============================================= */
  /* 18. CATEGORIES EXPLORE                        */
  /* ============================================= */
  --ce-badge-new-bg: var(--info-color-lighter);
  --ce-badge-new-text: var(--info-color);
  --ce-badge-discount-bg: var(--danger-color-light);
  --ce-badge-discount-text: var(--text-inverse);
}

/* ============================================= */
/* MEGAPARTY UTILITIES - VERDE BRAND            */
/* ============================================= */

/* Gradient verde brand */
.megaparty-gradient {
  background: linear-gradient(135deg, #55aa00 0%, #7bc143 100%);
}

/* Hover lift effect con shadow verde */
.megaparty-hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.megaparty-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(85, 170, 0, 0.2);
}

/* Badge brand Megaparty */
.megaparty-badge {
  background: linear-gradient(135deg, #55aa00 0%, #7bc143 100%);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 12px rgba(85, 170, 0, 0.25);
}

/* ============================================= */
/* FOOTER - OVERRIDES PER TEMA VERDE            */
/* ============================================= */
/* Adatta il footer al tema verde mantenendolo scuro */
:root {
  --footer-accent: #4a9500;
  /* Verde scuro per link/accenti */
  --footer-bg: #0d1f0d;
  /* Sfondo molto scuro con tinta verde */
  --footer-text: var(--gray-200);
  /* Grigio chiaro per testo */
  --footer-border: rgba(85, 170, 0, 0.15);
  /* Bordi con tinta verde */
}

/* ============================================= */
/* SOCIAL MEDIA - OVERRIDES PER TEMA MEGAPARTY  */
/* ============================================= */
/* LinkedIn usa il brand verde invece del cyan */
:root {
  --social-linkedin: var(--primary-color);
  --social-linkedin-hover: var(--primary-color-hover);
}