/**
 * Guidami Abruzzo - Design System & Token Variables
 * Portale Ecosistema Digitale Guide & Territorio Abruzzo
 * Conforme a WCAG 2.1 AA/AAA e Core Web Vitals
 */

/* ==========================================================================
   CARICAMENTO LOCALE DEI FONT WOFF2 (PRIVACY & CORE WEB VITALS)
   ========================================================================== */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/outfit-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/outfit-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/outfit-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-700.woff2') format('woff2');
}

:root {
  /* ==========================================================================
     1. COLOR PALETTE TERRITORIALE (BRAND IDENTITY)
     ========================================================================== */
  
  /* Verde Bosco Parchi (Primary Brand) - PNALM, Gran Sasso, Maiella */
  --c-green-dark: #14532d;
  --c-green-primary: #15803d;
  --c-green-hover: #166534;
  --c-green-subtle: #f0fdf4;
  --c-green-text-badge: #14532d;
  --c-green-accent: #4ade80; /* Accento luminoso per superfici scure (Footer, Dark UI) */

  /* Terracotta & Pietra Maiella (Secondary Brand) - Borghi, cultura, arte */
  --c-terracotta-dark: #8e3e1c;
  --c-terracotta-primary: #b4532a;
  --c-terracotta-hover: #93411e;
  --c-terracotta-subtle: #fbf0eb;
  --c-terracotta-text-badge: #93411e;

  /* Blu Trabocchi & Adriatico (Accent) - Costa dei Trabocchi, laghi */
  --c-blue-dark: #0c4b64;
  --c-blue-primary: #146482;
  --c-blue-hover: #1b7a9e;
  --c-blue-subtle: #e8f4f8;
  --c-blue-text-badge: #113e53;

  /* Oro Zafferano Navelli (Highlight & Premium) - Prestigio, guide Premium */
  --c-gold-dark: #976508;
  --c-gold-primary: #d29213;
  --c-gold-hover: #e09f19;
  --c-gold-subtle: #fef8ec;
  --c-gold-text-badge: #8c5a03;

  /* ==========================================================================
     2. SUPERFICI, NEUTRI E TIPOGRAFIA
     ========================================================================== */
  
  /* Backgrounds */
  --c-bg-body: #f8f7f4;           /* Caldo calcare d'Abruzzo */
  --c-bg-surface: #ffffff;        /* Card & modali */
  --c-bg-muted: #f1efea;          /* Barre ricerca e filtri */

  /* Text & Typography */
  --c-text-main: #1a2421;         /* Ardesia boschiva scura (12.8:1 su bg-body) */
  --c-text-secondary: #52635d;    /* Contrasto WCAG AA 5.6:1 */
  --c-text-muted: #7e8e88;

  /* Borders */
  --c-border-subtle: #e5e2da;
  --c-border-medium: #cbc7bc;
  --c-border-focus: #15803d;

  /* Feedback & Channels */
  --c-success: #1e824c;
  --c-whatsapp: #25d366;
  --c-whatsapp-hover: #1ebe5d;

  /* ==========================================================================
     3. TIPOGRAFIA & SCALA FONT
     ========================================================================== */
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Fluid Font Sizes */
  --fs-hero: clamp(2rem, 4vw + 1rem, 2.75rem);   /* 32px - 44px */
  --fs-h1: clamp(1.625rem, 3vw + 0.5rem, 2.25rem); /* 26px - 36px */
  --fs-h2: clamp(1.375rem, 2vw + 0.5rem, 1.75rem); /* 22px - 28px */
  --fs-h3: clamp(1.125rem, 1.5vw + 0.25rem, 1.375rem); /* 18px - 22px */
  --fs-h4: 1.125rem;                               /* 18px */
  --fs-body: 1rem;                                 /* 16px */
  --fs-body-sm: 0.875rem;                          /* 14px */
  --fs-caption: 0.8125rem;                         /* 13px */
  --fs-micro: 0.6875rem;                           /* 11px */

  /* Line Heights */
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  /* ==========================================================================
     4. ELEVAZIONE & OMBRE (ORGANIC SYSTEM)
     ========================================================================== */
  --shadow-xs: 0 1px 2px rgba(21, 128, 61, 0.05);
  --shadow-sm: 0 2px 6px -1px rgba(21, 128, 61, 0.06), 0 1px 3px rgba(0, 0, 0, 0.03);
  --shadow-card: 0 4px 14px -3px rgba(21, 128, 61, 0.07), 0 2px 6px -1px rgba(0, 0, 0, 0.03);
  --shadow-card-hover: 0 14px 26px -5px rgba(21, 128, 61, 0.12), 0 4px 10px -2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 20px 32px -8px rgba(21, 128, 61, 0.15);

  /* ==========================================================================
     5. RAGGI DI CURVATURA (BORDER RADIUS)
     ========================================================================== */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Transizioni */
  --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   CLASSI DI UTILITÀ COMPONENTI UI
   ========================================================================== */

/* Bottoni Base */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  padding: 0.625rem 1.125rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--t-fast);
}

.btn-primary {
  background-color: var(--c-green-primary);
  color: #ffffff;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--c-green-hover);
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn-secondary {
  background-color: var(--c-terracotta-primary);
  color: #ffffff;
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--c-terracotta-hover);
  color: #ffffff !important;
  transform: translateY(-1px);
}

.btn-outline {
  background-color: transparent;
  border-color: var(--c-border-subtle);
  color: var(--c-text-main);
}
.btn-outline:hover,
.btn-outline:focus {
  border-color: var(--c-green-primary);
  color: var(--c-green-primary);
  background-color: var(--c-green-subtle);
}

.btn-whatsapp {
  background-color: var(--c-whatsapp);
  color: #ffffff;
}
.btn-whatsapp:hover,
.btn-whatsapp:focus {
  background-color: var(--c-whatsapp-hover);
  color: #ffffff !important;
  transform: translateY(-1px);
}

.btn-lg {
  padding: 0.875rem 1.85rem;
  font-size: var(--fs-body);
  font-weight: 600;
  border-radius: var(--radius-sm);
}

.btn-sm {
  padding: 0.45rem 0.85rem;
  font-size: var(--fs-caption);
  border-radius: var(--radius-sm);
}

/* Badge Categorie Professionali */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-micro);
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.badge-turistica {
  background-color: var(--c-terracotta-subtle);
  color: var(--c-terracotta-text-badge);
  border: 1px solid rgba(180, 83, 42, 0.15);
}

.badge-gae {
  background-color: var(--c-green-subtle);
  color: var(--c-green-text-badge);
  border: 1px solid rgba(21, 128, 61, 0.2);
}

.badge-amm {
  background-color: var(--c-blue-subtle);
  color: var(--c-blue-text-badge);
  border: 1px solid rgba(20, 100, 130, 0.15);
}

.badge-premium {
  background-color: var(--c-gold-subtle);
  color: var(--c-gold-text-badge);
  border: 1px solid rgba(210, 146, 19, 0.25);
  font-weight: 700;
}

.badge-pro {
  background-color: var(--c-terracotta-subtle);
  color: var(--c-terracotta-dark);
  border: 1px solid rgba(180, 83, 42, 0.3);
  font-weight: 700;
}

.badge-verified {
  background-color: #eaf6ee;
  color: #135f36;
  border: 1px solid #c2e8ce;
}