/* ============================================================================
 * EnterHouse Beauty & Wellness — Brand CSS
 * Palette ufficiale prodotto: Antracite + Rose gold (vibe minimalismo luxury)
 * Font: Plus Jakarta Sans (heading) + Inter (body)
 *
 * Documento di riferimento: STATUS.md sezione "Identità di marca del prodotto"
 * Tono di voce: "la calma dentro il rumore" — diretto, concreto, no hype.
 * ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

/* ----------------------------------------------------------------------------
 * Design tokens — variabili CSS
 * ---------------------------------------------------------------------------- */
:root {
  /* Palette */
  --eh-primario: #1A1A1A;          /* Antracite — testi, header, sidebar */
  --eh-accento: #B76E79;           /* Rose gold — CTA primari, link attivi */
  --eh-accento-hover: #A05F69;     /* Rose gold scuro per hover */
  --eh-accento-light: #E8C7CC;     /* Rose gold chiaro per badge/sfondi */
  --eh-bg: #FAFAF7;                /* Off-white — sfondo applicativo */
  --eh-bg-elev: #FFFFFF;           /* Bianco puro — card, modal */
  --eh-neutro: #8B8B8B;            /* Grigio — testi secondari */
  --eh-neutro-light: #D8D8D8;      /* Grigio chiaro — bordi, separatori */
  --eh-neutro-bg: #F0F0EE;         /* Grigio sfondo — input, hover sottili */

  /* Stati funzionali */
  --eh-successo: #3D8B5C;
  --eh-warning: #C9831F;
  --eh-errore: #A8443A;
  --eh-info: #6B7B8C;

  /* Typography */
  --eh-font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --eh-font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Spacing scale (4px base) */
  --eh-sp-1: 0.25rem;   /* 4px */
  --eh-sp-2: 0.5rem;    /* 8px */
  --eh-sp-3: 0.75rem;   /* 12px */
  --eh-sp-4: 1rem;      /* 16px */
  --eh-sp-5: 1.5rem;    /* 24px */
  --eh-sp-6: 2rem;      /* 32px */
  --eh-sp-7: 3rem;      /* 48px */
  --eh-sp-8: 4rem;      /* 64px */

  /* Radius / shadow */
  --eh-radius-sm: 4px;
  --eh-radius: 8px;
  --eh-radius-lg: 16px;
  --eh-shadow-sm: 0 1px 2px rgba(26,26,26,0.04);
  --eh-shadow: 0 2px 8px rgba(26,26,26,0.06);
  --eh-shadow-lg: 0 8px 32px rgba(26,26,26,0.10);

  /* Transition */
  --eh-transition: 150ms ease;
}

/* ----------------------------------------------------------------------------
 * Reset minimo
 * ---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--eh-font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--eh-primario);
  background: var(--eh-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }

button { font-family: inherit; cursor: pointer; }

a { color: var(--eh-accento); text-decoration: none; transition: color var(--eh-transition); }
a:hover { color: var(--eh-accento-hover); }

/* ----------------------------------------------------------------------------
 * Typography
 * ---------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--eh-font-heading);
  font-weight: 600;
  color: var(--eh-primario);
  line-height: 1.2;
  margin: 0 0 var(--eh-sp-4) 0;
}

h1 { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 1.75rem; letter-spacing: -0.01em; }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; }
h5, h6 { font-size: 1rem; }

p { margin: 0 0 var(--eh-sp-4) 0; }

.eh-text-secondary { color: var(--eh-neutro); }
.eh-text-small { font-size: 0.875rem; }
.eh-text-tiny { font-size: 0.75rem; }

/* ----------------------------------------------------------------------------
 * Layout
 * ---------------------------------------------------------------------------- */
.eh-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--eh-sp-5);
}

.eh-stack > * + * { margin-top: var(--eh-sp-4); }
.eh-stack-lg > * + * { margin-top: var(--eh-sp-6); }

/* ----------------------------------------------------------------------------
 * Componenti — Button
 * ---------------------------------------------------------------------------- */
.eh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--eh-sp-2);
  padding: var(--eh-sp-3) var(--eh-sp-5);
  border: 1px solid transparent;
  border-radius: var(--eh-radius);
  font-family: var(--eh-font-body);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: all var(--eh-transition);
  white-space: nowrap;
  text-decoration: none;
}

.eh-btn-primary {
  background: var(--eh-accento);
  color: #FFFFFF;
}
.eh-btn-primary:hover { background: var(--eh-accento-hover); color: #FFFFFF; }

.eh-btn-secondary {
  background: var(--eh-primario);
  color: #FFFFFF;
}
.eh-btn-secondary:hover { background: #000000; color: #FFFFFF; }

.eh-btn-ghost {
  background: transparent;
  color: var(--eh-primario);
  border-color: var(--eh-neutro-light);
}
.eh-btn-ghost:hover { background: var(--eh-neutro-bg); color: var(--eh-primario); }

.eh-btn-danger {
  background: var(--eh-errore);
  color: #FFFFFF;
}

.eh-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ----------------------------------------------------------------------------
 * Componenti — Input
 * ---------------------------------------------------------------------------- */
.eh-input, .eh-select, .eh-textarea {
  width: 100%;
  padding: var(--eh-sp-3) var(--eh-sp-4);
  background: var(--eh-bg-elev);
  border: 1px solid var(--eh-neutro-light);
  border-radius: var(--eh-radius);
  font-family: var(--eh-font-body);
  font-size: 0.95rem;
  color: var(--eh-primario);
  transition: border-color var(--eh-transition);
}
.eh-input:focus, .eh-select:focus, .eh-textarea:focus {
  outline: none;
  border-color: var(--eh-accento);
  box-shadow: 0 0 0 3px var(--eh-accento-light);
}
.eh-input::placeholder { color: var(--eh-neutro); }

.eh-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--eh-primario);
  margin-bottom: var(--eh-sp-2);
}

/* ----------------------------------------------------------------------------
 * Componenti — Card
 * ---------------------------------------------------------------------------- */
.eh-card {
  background: var(--eh-bg-elev);
  border: 1px solid var(--eh-neutro-light);
  border-radius: var(--eh-radius);
  padding: var(--eh-sp-5);
  box-shadow: var(--eh-shadow-sm);
}

.eh-card-elev {
  background: var(--eh-bg-elev);
  border: none;
  border-radius: var(--eh-radius-lg);
  padding: var(--eh-sp-6);
  box-shadow: var(--eh-shadow-lg);
}

/* ----------------------------------------------------------------------------
 * Componenti — Table
 * ---------------------------------------------------------------------------- */
.eh-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.eh-table th, .eh-table td {
  padding: var(--eh-sp-3) var(--eh-sp-4);
  text-align: left;
  border-bottom: 1px solid var(--eh-neutro-light);
}
.eh-table th {
  font-family: var(--eh-font-heading);
  font-weight: 600;
  color: var(--eh-neutro);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.eh-table tbody tr:hover { background: var(--eh-neutro-bg); }

/* ----------------------------------------------------------------------------
 * Componenti — Badge / Pill
 * ---------------------------------------------------------------------------- */
.eh-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--eh-sp-3);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--eh-neutro-bg);
  color: var(--eh-primario);
}
.eh-badge-accento { background: var(--eh-accento-light); color: var(--eh-accento-hover); }
.eh-badge-success { background: rgba(61,139,92,0.12); color: var(--eh-successo); }
.eh-badge-warning { background: rgba(201,131,31,0.12); color: var(--eh-warning); }
.eh-badge-error   { background: rgba(168,68,58,0.12);  color: var(--eh-errore); }

/* ----------------------------------------------------------------------------
 * Componenti — Alert / Callout
 * ---------------------------------------------------------------------------- */
.eh-alert {
  padding: var(--eh-sp-4) var(--eh-sp-5);
  border-radius: var(--eh-radius);
  border-left: 4px solid var(--eh-info);
  background: rgba(107,123,140,0.08);
  color: var(--eh-primario);
}
.eh-alert-success { border-color: var(--eh-successo); background: rgba(61,139,92,0.08); }
.eh-alert-warning { border-color: var(--eh-warning);  background: rgba(201,131,31,0.08); }
.eh-alert-error   { border-color: var(--eh-errore);   background: rgba(168,68,58,0.08); }

/* ----------------------------------------------------------------------------
 * Utility
 * ---------------------------------------------------------------------------- */
.eh-mt-0 { margin-top: 0; }
.eh-mb-0 { margin-bottom: 0; }
.eh-mt-4 { margin-top: var(--eh-sp-4); }
.eh-mb-4 { margin-bottom: var(--eh-sp-4); }
.eh-mt-6 { margin-top: var(--eh-sp-6); }
.eh-mb-6 { margin-bottom: var(--eh-sp-6); }
.eh-flex { display: flex; }
.eh-flex-col { display: flex; flex-direction: column; }
.eh-items-center { align-items: center; }
.eh-justify-between { justify-content: space-between; }
.eh-gap-2 { gap: var(--eh-sp-2); }
.eh-gap-4 { gap: var(--eh-sp-4); }
.eh-text-center { text-align: center; }
.eh-w-full { width: 100%; }

/* Responsive helpers */
@media (max-width: 768px) {
  .eh-hide-mobile { display: none !important; }
  h1 { font-size: 1.875rem; }
  h2 { font-size: 1.5rem; }
}