:root {
      --color-primary: #1B4F8A;
      --color-secondary: #2E86C1;
      --color-accent: #F0A500;
      --color-sand: #F5E6C8;
      --color-text: #1A1A2E;
      --color-muted: #6B7280;
      --color-bg: #FAFAF8;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --color-bg: #0F1923;
        --color-text: #F0F4F8;
      }
      body { background-color: #0F1923; color: #F0F4F8; }
      .dark-card { background-color: #1A2535 !important; }
      .dark-nav { background-color: rgba(15,25,35,0.95) !important; }
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { font-family: 'Inter', sans-serif; color: var(--color-text); background: var(--color-bg); }

    .font-serif { font-family: 'Playfair Display', serif; }

    .hero-gradient {
      background: linear-gradient(135deg, rgba(27,79,138,0.75) 0%, rgba(46,134,193,0.45) 50%, rgba(0,0,0,0.3) 100%);
    }

    .badge-blue { background: #DBEAFE; color: #1E40AF; }
    .badge-teal { background: #CCFBF1; color: #0F766E; }
    .badge-purple { background: #EDE9FE; color: #6D28D9; }
    .badge-pink { background: #FCE7F3; color: #BE185D; }
    .badge-green { background: #DCFCE7; color: #15803D; }
    .badge-orange { background: #FEF3C7; color: #92400E; }

    .star-rating { color: #F0A500; }

    .card-hover { transition: transform 0.25s ease, box-shadow 0.25s ease; }
    .card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(27,79,138,0.15); }

    .btn-primary {
      background: linear-gradient(135deg, #1B4F8A, #2E86C1);
      color: white;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(27,79,138,0.35);
    }

    .btn-accent {
      background: linear-gradient(135deg, #F0A500, #E08800);
      color: white;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .btn-accent:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(240,165,0,0.35);
    }

    .wave-divider { overflow: hidden; line-height: 0; }
    .section-divider { height: 3px; background: linear-gradient(90deg, transparent, #1B4F8A, #2E86C1, transparent); }

    .nav-link { position: relative; }
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0;
      height: 2px;
      background: #F0A500;
      transition: width 0.3s;
    }
    .nav-link:hover::after { width: 100%; }

    .zone-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
    .zone-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(27,79,138,0.12); }

    .filter-btn { transition: all 0.2s; }
    .filter-btn.active { background: #1B4F8A; color: white; }

    input, select { transition: border-color 0.2s, box-shadow 0.2s; }
    input:focus, select:focus { border-color: #2E86C1; box-shadow: 0 0 0 3px rgba(46,134,193,0.15); outline: none; }
  

/* Tailwind custom classes — generate da tailwind.config del layout */

:root {
  --color-primary: #1B4F8A;
  --color-secondary: #2E86C1;
  --color-accent: #F0A500;
  --color-sand: #F5E6C8;
  --color-seafoam: #E8F4FD;
  --color-muted: #6B7280;
  --color-bglight: #FAFAF8;
  --font-serif: 'Playfair Display', serif;
  --font-sans: Inter, sans-serif;
}

/* Custom color utilities */
.bg-primary { background-color: #1B4F8A !important; }
.text-primary { color: #1B4F8A !important; }
.border-primary { border-color: #1B4F8A !important; }
.ring-primary { --tw-ring-color: #1B4F8A; }
.from-primary { --tw-gradient-from: #1B4F8A; }
.to-primary { --tw-gradient-to: #1B4F8A; }
.bg-primary/10 { background-color: rgba(27,79,138,0.1) !important; }
.text-primary/10 { color: rgba(27,79,138,0.1) !important; }
.bg-primary/20 { background-color: rgba(27,79,138,0.2) !important; }
.text-primary/20 { color: rgba(27,79,138,0.2) !important; }
.bg-primary/30 { background-color: rgba(27,79,138,0.3) !important; }
.text-primary/30 { color: rgba(27,79,138,0.3) !important; }
.bg-primary/40 { background-color: rgba(27,79,138,0.4) !important; }
.text-primary/40 { color: rgba(27,79,138,0.4) !important; }
.bg-primary/50 { background-color: rgba(27,79,138,0.5) !important; }
.text-primary/50 { color: rgba(27,79,138,0.5) !important; }
.bg-primary/60 { background-color: rgba(27,79,138,0.6) !important; }
.text-primary/60 { color: rgba(27,79,138,0.6) !important; }
.bg-primary/70 { background-color: rgba(27,79,138,0.7) !important; }
.text-primary/70 { color: rgba(27,79,138,0.7) !important; }
.bg-primary/80 { background-color: rgba(27,79,138,0.8) !important; }
.text-primary/80 { color: rgba(27,79,138,0.8) !important; }
.bg-primary/90 { background-color: rgba(27,79,138,0.9) !important; }
.text-primary/90 { color: rgba(27,79,138,0.9) !important; }
.bg-primary/95 { background-color: rgba(27,79,138,0.95) !important; }
.text-primary/95 { color: rgba(27,79,138,0.95) !important; }
.bg-secondary { background-color: #2E86C1 !important; }
.text-secondary { color: #2E86C1 !important; }
.border-secondary { border-color: #2E86C1 !important; }
.ring-secondary { --tw-ring-color: #2E86C1; }
.from-secondary { --tw-gradient-from: #2E86C1; }
.to-secondary { --tw-gradient-to: #2E86C1; }
.bg-secondary/10 { background-color: rgba(46,134,193,0.1) !important; }
.text-secondary/10 { color: rgba(46,134,193,0.1) !important; }
.bg-secondary/20 { background-color: rgba(46,134,193,0.2) !important; }
.text-secondary/20 { color: rgba(46,134,193,0.2) !important; }
.bg-secondary/30 { background-color: rgba(46,134,193,0.3) !important; }
.text-secondary/30 { color: rgba(46,134,193,0.3) !important; }
.bg-secondary/40 { background-color: rgba(46,134,193,0.4) !important; }
.text-secondary/40 { color: rgba(46,134,193,0.4) !important; }
.bg-secondary/50 { background-color: rgba(46,134,193,0.5) !important; }
.text-secondary/50 { color: rgba(46,134,193,0.5) !important; }
.bg-secondary/60 { background-color: rgba(46,134,193,0.6) !important; }
.text-secondary/60 { color: rgba(46,134,193,0.6) !important; }
.bg-secondary/70 { background-color: rgba(46,134,193,0.7) !important; }
.text-secondary/70 { color: rgba(46,134,193,0.7) !important; }
.bg-secondary/80 { background-color: rgba(46,134,193,0.8) !important; }
.text-secondary/80 { color: rgba(46,134,193,0.8) !important; }
.bg-secondary/90 { background-color: rgba(46,134,193,0.9) !important; }
.text-secondary/90 { color: rgba(46,134,193,0.9) !important; }
.bg-secondary/95 { background-color: rgba(46,134,193,0.95) !important; }
.text-secondary/95 { color: rgba(46,134,193,0.95) !important; }
.bg-accent { background-color: #F0A500 !important; }
.text-accent { color: #F0A500 !important; }
.border-accent { border-color: #F0A500 !important; }
.ring-accent { --tw-ring-color: #F0A500; }
.from-accent { --tw-gradient-from: #F0A500; }
.to-accent { --tw-gradient-to: #F0A500; }
.bg-accent/10 { background-color: rgba(240,165,0,0.1) !important; }
.text-accent/10 { color: rgba(240,165,0,0.1) !important; }
.bg-accent/20 { background-color: rgba(240,165,0,0.2) !important; }
.text-accent/20 { color: rgba(240,165,0,0.2) !important; }
.bg-accent/30 { background-color: rgba(240,165,0,0.3) !important; }
.text-accent/30 { color: rgba(240,165,0,0.3) !important; }
.bg-accent/40 { background-color: rgba(240,165,0,0.4) !important; }
.text-accent/40 { color: rgba(240,165,0,0.4) !important; }
.bg-accent/50 { background-color: rgba(240,165,0,0.5) !important; }
.text-accent/50 { color: rgba(240,165,0,0.5) !important; }
.bg-accent/60 { background-color: rgba(240,165,0,0.6) !important; }
.text-accent/60 { color: rgba(240,165,0,0.6) !important; }
.bg-accent/70 { background-color: rgba(240,165,0,0.7) !important; }
.text-accent/70 { color: rgba(240,165,0,0.7) !important; }
.bg-accent/80 { background-color: rgba(240,165,0,0.8) !important; }
.text-accent/80 { color: rgba(240,165,0,0.8) !important; }
.bg-accent/90 { background-color: rgba(240,165,0,0.9) !important; }
.text-accent/90 { color: rgba(240,165,0,0.9) !important; }
.bg-accent/95 { background-color: rgba(240,165,0,0.95) !important; }
.text-accent/95 { color: rgba(240,165,0,0.95) !important; }
.bg-sand { background-color: #F5E6C8 !important; }
.text-sand { color: #F5E6C8 !important; }
.border-sand { border-color: #F5E6C8 !important; }
.ring-sand { --tw-ring-color: #F5E6C8; }
.from-sand { --tw-gradient-from: #F5E6C8; }
.to-sand { --tw-gradient-to: #F5E6C8; }
.bg-sand/10 { background-color: rgba(245,230,200,0.1) !important; }
.text-sand/10 { color: rgba(245,230,200,0.1) !important; }
.bg-sand/20 { background-color: rgba(245,230,200,0.2) !important; }
.text-sand/20 { color: rgba(245,230,200,0.2) !important; }
.bg-sand/30 { background-color: rgba(245,230,200,0.3) !important; }
.text-sand/30 { color: rgba(245,230,200,0.3) !important; }
.bg-sand/40 { background-color: rgba(245,230,200,0.4) !important; }
.text-sand/40 { color: rgba(245,230,200,0.4) !important; }
.bg-sand/50 { background-color: rgba(245,230,200,0.5) !important; }
.text-sand/50 { color: rgba(245,230,200,0.5) !important; }
.bg-sand/60 { background-color: rgba(245,230,200,0.6) !important; }
.text-sand/60 { color: rgba(245,230,200,0.6) !important; }
.bg-sand/70 { background-color: rgba(245,230,200,0.7) !important; }
.text-sand/70 { color: rgba(245,230,200,0.7) !important; }
.bg-sand/80 { background-color: rgba(245,230,200,0.8) !important; }
.text-sand/80 { color: rgba(245,230,200,0.8) !important; }
.bg-sand/90 { background-color: rgba(245,230,200,0.9) !important; }
.text-sand/90 { color: rgba(245,230,200,0.9) !important; }
.bg-sand/95 { background-color: rgba(245,230,200,0.95) !important; }
.text-sand/95 { color: rgba(245,230,200,0.95) !important; }
.bg-seafoam { background-color: #E8F4FD !important; }
.text-seafoam { color: #E8F4FD !important; }
.border-seafoam { border-color: #E8F4FD !important; }
.ring-seafoam { --tw-ring-color: #E8F4FD; }
.from-seafoam { --tw-gradient-from: #E8F4FD; }
.to-seafoam { --tw-gradient-to: #E8F4FD; }
.bg-seafoam/10 { background-color: rgba(232,244,253,0.1) !important; }
.text-seafoam/10 { color: rgba(232,244,253,0.1) !important; }
.bg-seafoam/20 { background-color: rgba(232,244,253,0.2) !important; }
.text-seafoam/20 { color: rgba(232,244,253,0.2) !important; }
.bg-seafoam/30 { background-color: rgba(232,244,253,0.3) !important; }
.text-seafoam/30 { color: rgba(232,244,253,0.3) !important; }
.bg-seafoam/40 { background-color: rgba(232,244,253,0.4) !important; }
.text-seafoam/40 { color: rgba(232,244,253,0.4) !important; }
.bg-seafoam/50 { background-color: rgba(232,244,253,0.5) !important; }
.text-seafoam/50 { color: rgba(232,244,253,0.5) !important; }
.bg-seafoam/60 { background-color: rgba(232,244,253,0.6) !important; }
.text-seafoam/60 { color: rgba(232,244,253,0.6) !important; }
.bg-seafoam/70 { background-color: rgba(232,244,253,0.7) !important; }
.text-seafoam/70 { color: rgba(232,244,253,0.7) !important; }
.bg-seafoam/80 { background-color: rgba(232,244,253,0.8) !important; }
.text-seafoam/80 { color: rgba(232,244,253,0.8) !important; }
.bg-seafoam/90 { background-color: rgba(232,244,253,0.9) !important; }
.text-seafoam/90 { color: rgba(232,244,253,0.9) !important; }
.bg-seafoam/95 { background-color: rgba(232,244,253,0.95) !important; }
.text-seafoam/95 { color: rgba(232,244,253,0.95) !important; }
.bg-muted { background-color: #6B7280 !important; }
.text-muted { color: #6B7280 !important; }
.border-muted { border-color: #6B7280 !important; }
.ring-muted { --tw-ring-color: #6B7280; }
.from-muted { --tw-gradient-from: #6B7280; }
.to-muted { --tw-gradient-to: #6B7280; }
.bg-muted/10 { background-color: rgba(107,114,128,0.1) !important; }
.text-muted/10 { color: rgba(107,114,128,0.1) !important; }
.bg-muted/20 { background-color: rgba(107,114,128,0.2) !important; }
.text-muted/20 { color: rgba(107,114,128,0.2) !important; }
.bg-muted/30 { background-color: rgba(107,114,128,0.3) !important; }
.text-muted/30 { color: rgba(107,114,128,0.3) !important; }
.bg-muted/40 { background-color: rgba(107,114,128,0.4) !important; }
.text-muted/40 { color: rgba(107,114,128,0.4) !important; }
.bg-muted/50 { background-color: rgba(107,114,128,0.5) !important; }
.text-muted/50 { color: rgba(107,114,128,0.5) !important; }
.bg-muted/60 { background-color: rgba(107,114,128,0.6) !important; }
.text-muted/60 { color: rgba(107,114,128,0.6) !important; }
.bg-muted/70 { background-color: rgba(107,114,128,0.7) !important; }
.text-muted/70 { color: rgba(107,114,128,0.7) !important; }
.bg-muted/80 { background-color: rgba(107,114,128,0.8) !important; }
.text-muted/80 { color: rgba(107,114,128,0.8) !important; }
.bg-muted/90 { background-color: rgba(107,114,128,0.9) !important; }
.text-muted/90 { color: rgba(107,114,128,0.9) !important; }
.bg-muted/95 { background-color: rgba(107,114,128,0.95) !important; }
.text-muted/95 { color: rgba(107,114,128,0.95) !important; }
.bg-bglight { background-color: #FAFAF8 !important; }
.text-bglight { color: #FAFAF8 !important; }
.border-bglight { border-color: #FAFAF8 !important; }
.ring-bglight { --tw-ring-color: #FAFAF8; }
.from-bglight { --tw-gradient-from: #FAFAF8; }
.to-bglight { --tw-gradient-to: #FAFAF8; }
.bg-bglight/10 { background-color: rgba(250,250,248,0.1) !important; }
.text-bglight/10 { color: rgba(250,250,248,0.1) !important; }
.bg-bglight/20 { background-color: rgba(250,250,248,0.2) !important; }
.text-bglight/20 { color: rgba(250,250,248,0.2) !important; }
.bg-bglight/30 { background-color: rgba(250,250,248,0.3) !important; }
.text-bglight/30 { color: rgba(250,250,248,0.3) !important; }
.bg-bglight/40 { background-color: rgba(250,250,248,0.4) !important; }
.text-bglight/40 { color: rgba(250,250,248,0.4) !important; }
.bg-bglight/50 { background-color: rgba(250,250,248,0.5) !important; }
.text-bglight/50 { color: rgba(250,250,248,0.5) !important; }
.bg-bglight/60 { background-color: rgba(250,250,248,0.6) !important; }
.text-bglight/60 { color: rgba(250,250,248,0.6) !important; }
.bg-bglight/70 { background-color: rgba(250,250,248,0.7) !important; }
.text-bglight/70 { color: rgba(250,250,248,0.7) !important; }
.bg-bglight/80 { background-color: rgba(250,250,248,0.8) !important; }
.text-bglight/80 { color: rgba(250,250,248,0.8) !important; }
.bg-bglight/90 { background-color: rgba(250,250,248,0.9) !important; }
.text-bglight/90 { color: rgba(250,250,248,0.9) !important; }
.bg-bglight/95 { background-color: rgba(250,250,248,0.95) !important; }
.text-bglight/95 { color: rgba(250,250,248,0.95) !important; }

/* Custom font utilities */
.font-serif { font-family: 'Playfair Display', serif !important; }
.font-sans { font-family: Inter, sans-serif !important; }