/*
 * Studio Emmeffe — Design System v2.0
 * Tokens + Reset + Utility atomiche
 *
 * Struttura:
 *   1. Custom Properties (token di design)
 *      1a. Palette colori
 *      1b. Tipografia
 *      1c. Spacing
 *      1d. Radius
 *      1e. Shadow
 *      1f. Container
 *   2. Reset moderno
 *   3. Base tipografica
 *   4. Utility atomiche
 *      4a. Layout
 *      4b. Spaziatura
 *      4c. Testo
 *      4d. Sfondo
 *      4e. Accessibilita
 *
 * NOTA: Nessun token IBM Carbon in questo file.
 * Vietato: #0f62fe, IBM Plex Sans, letter-spacing 0.16px.
 */

/* ============================================================
   1a. PALETTE COLORI
   ============================================================ */

:root {

  /* --- Sfondi --- */
  --color-canvas: #FAF7F2;          /* sfondo principale pagina */
  --color-surface: #F4EFE7;         /* card base, sezioni alternate, footer */
  --color-surface-raised: #FFFFFF;  /* card elevata su canvas */
  --color-surface-warm: #EEE6D7;    /* trust-strip, banner caldi */

  /* --- Testo --- */
  --color-ink: #1F1B16;             /* testo principale */
  --color-ink-soft: #4A4239;        /* testo secondario, label */
  --color-ink-muted: #7A7066;       /* metadati, placeholder, captions */

  /* --- Bordi --- */
  --color-line: #E2D9C9;            /* hairline su canvas/surface */
  --color-line-strong: #C8BBA4;     /* bordi piu visibili, focus rest */

  /* --- Accento primario: verde salvia --- */
  --color-accent: #3F6B4E;
  --color-accent-hover: #345A41;
  --color-accent-soft: #DEE9DF;     /* sfondo tonale (badge, banner soft) */

  /* --- Accento secondario: blu navy --- */
  --color-deep: #1E2D4D;
  --color-deep-hover: #162439;

  /* --- Accento terziario: terracotta (uso parsimonioso) --- */
  --color-warm: #C46E4A;
  --color-warm-soft: #F3DDD0;

  /* --- Semantici --- */
  --color-success: #3F6B4E;         /* alias di accent */
  --color-success-soft: #DEE9DF;
  --color-warning: #B8862F;         /* ambra caldo */
  --color-warning-soft: #F4E6C5;
  --color-error: #9C3B2E;           /* rosso terracotta scuro */
  --color-error-soft: #F1D4CB;
  --color-info: #1E2D4D;            /* alias di deep */
  --color-info-soft: #D9DEE9;

  /* --- Focus --- */
  --color-focus-ring: #3F6B4E;      /* outline accessibile */

}

/* ============================================================
   1b. TIPOGRAFIA
   ============================================================ */

:root {

  /* Famiglie */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, 'Times New Roman', Times, serif;

  /* Scala dimensioni (rem, base 16px) */
  --fs-caption:  0.75rem;    /* 12px — metadata, micro-label */
  --fs-body-sm:  0.875rem;   /* 14px — label form, footer text, testo secondario */
  --fs-body:     1rem;       /* 16px — body default */
  --fs-body-lg:  1.125rem;   /* 18px — lead paragraph, intro sezione */
  --fs-h4:       1.25rem;    /* 20px — card title, label sezione (Inter 600) */
  --fs-h3:       1.5rem;     /* 24px — sub-section heading (Fraunces) */
  --fs-h2:       2rem;       /* 32px — section heading principale (Fraunces) */
  --fs-h1: clamp(2.25rem, 4vw + 1rem, 3.5rem); /* 36-56px fluid (Fraunces) */

  /* Pesi */
  --fw-regular:  400;
  --fw-semibold: 600;
  --fw-medium:   500;

  /* Altezze di riga */
  --lh-display: 1.1;    /* h1/h2 Fraunces */
  --lh-heading: 1.25;   /* h3/h4 */
  --lh-body:    1.6;    /* body, body-lg */
  --lh-small:   1.5;    /* body-sm, caption */
  --lh-button:  1.2;    /* label bottone */

  /* Letter-spacing */
  --ls-display:  -0.015em;  /* serif grandi */
  --ls-heading:  -0.005em;  /* h4 Inter semibold */
  --ls-body:      normal;   /* body Inter */
  --ls-eyebrow:   0.04em;   /* kicker uppercase */

}

/* ============================================================
   1c. SPACING (base unit: 4px)
   ============================================================ */

:root {

  --space-2xs: 0.25rem;  /* 4px */
  --space-xs:  0.5rem;   /* 8px */
  --space-sm:  0.75rem;  /* 12px */
  --space-md:  1rem;     /* 16px */
  --space-lg:  1.5rem;   /* 24px */
  --space-xl:  2rem;     /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4.5rem;   /* 72px */
  --space-4xl: 6rem;     /* 96px */

}

/* ============================================================
   1d. BORDER RADIUS
   ============================================================ */

:root {

  --radius-none: 0;
  --radius-xs:   4px;    /* badge micro, tag piccoli */
  --radius-sm:   8px;    /* button, input, micro-card */
  --radius-md:   12px;   /* WORKHORSE — card, panel, callout */
  --radius-lg:   16px;   /* modal, hero panel, contenitori prominenti */
  --radius-xl:   24px;   /* elementi decorativi grandi */
  --radius-full: 999px;  /* pill, avatar circolari */

}

/* ============================================================
   1e. SHADOW (warm-tinted: rgba base 28, 24, 18)
   ============================================================ */

:root {

  --shadow-none: none;

  /* stato a riposo delle card */
  --shadow-subtle:
    0 1px 2px rgba(28, 24, 18, 0.06),
    0 1px 1px rgba(28, 24, 18, 0.04);

  /* card hover, dropdown, panel focused */
  --shadow-elevated:
    0 6px 16px rgba(28, 24, 18, 0.08),
    0 2px 4px  rgba(28, 24, 18, 0.06);

  /* AI module, modal, hero panel chiave */
  --shadow-panel:
    0 12px 32px rgba(28, 24, 18, 0.10),
    0 4px  8px  rgba(28, 24, 18, 0.06);

  /* transizione standard */
  --transition-shadow: box-shadow 200ms ease, transform 200ms ease;

}

/* ============================================================
   1f. CONTAINER
   ============================================================ */

:root {

  --container-max:            1200px;
  --container-padding-inline: clamp(1rem, 4vw, 2rem);

}

/* ============================================================
   2. RESET MODERNO
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-ink);
  background-color: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Riduzione del movimento rispettata */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Elementi multimediali */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Input e bottoni ereditano il font */
input,
button,
textarea,
select {
  font: inherit;
}

/* Overflow testo nei paragrafi */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* Liste senza stile per markup semantico */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Link */
a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Separatore */
hr {
  border: none;
  border-top: 1px solid var(--color-line);
}

/* ============================================================
   3. BASE TIPOGRAFICA
   ============================================================ */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--color-ink);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-display); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); }

h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-heading);
  color: var(--color-ink);
}

h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-body-lg); }
h6 { font-size: var(--fs-body); }

p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink-soft);
}

small {
  font-size: var(--fs-caption);
  line-height: var(--lh-small);
}

strong {
  font-weight: var(--fw-semibold);
}

/* ============================================================
   4a. UTILITY — LAYOUT
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
}

.grid {
  display: grid;
}

.grid--auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
}

.flex {
  display: flex;
}

.flex--center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex--between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex--wrap {
  display: flex;
  flex-wrap: wrap;
}

.flex--col {
  display: flex;
  flex-direction: column;
}

/* Gap utilities */
.gap-2xs { gap: var(--space-2xs); }
.gap-xs  { gap: var(--space-xs); }
.gap-sm  { gap: var(--space-sm); }
.gap-md  { gap: var(--space-md); }
.gap-lg  { gap: var(--space-lg); }
.gap-xl  { gap: var(--space-xl); }

/* ============================================================
   4b. UTILITY — SPAZIATURA
   ============================================================ */

/* Margin top */
.mt-2xs { margin-top: var(--space-2xs); }
.mt-xs  { margin-top: var(--space-xs); }
.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mt-xl  { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }

/* Margin bottom */
.mb-2xs { margin-bottom: var(--space-2xs); }
.mb-xs  { margin-bottom: var(--space-xs); }
.mb-sm  { margin-bottom: var(--space-sm); }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }
.mb-xl  { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mb-3xl { margin-bottom: var(--space-3xl); }

/* Padding */
.p-sm  { padding: var(--space-sm); }
.p-md  { padding: var(--space-md); }
.p-lg  { padding: var(--space-lg); }
.p-xl  { padding: var(--space-xl); }

/* Padding verticale */
.py-sm  { padding-block: var(--space-sm); }
.py-md  { padding-block: var(--space-md); }
.py-lg  { padding-block: var(--space-lg); }
.py-xl  { padding-block: var(--space-xl); }
.py-2xl { padding-block: var(--space-2xl); }
.py-3xl { padding-block: var(--space-3xl); }
.py-4xl { padding-block: var(--space-4xl); }

/* Padding orizzontale */
.px-sm  { padding-inline: var(--space-sm); }
.px-md  { padding-inline: var(--space-md); }
.px-lg  { padding-inline: var(--space-lg); }
.px-xl  { padding-inline: var(--space-xl); }

/* Flow: spaziatura automatica tra figli */
.flow > * + * {
  margin-top: var(--space-md);
}

.flow--lg > * + * {
  margin-top: var(--space-lg);
}

/* ============================================================
   4c. UTILITY — TESTO
   ============================================================ */

.text-caption  { font-size: var(--fs-caption);  line-height: var(--lh-small); }
.text-sm       { font-size: var(--fs-body-sm);  line-height: var(--lh-small); }
.text-body     { font-size: var(--fs-body);     line-height: var(--lh-body); }
.text-lg       { font-size: var(--fs-body-lg);  line-height: var(--lh-body); }

.text-ink      { color: var(--color-ink); }
.text-soft     { color: var(--color-ink-soft); }
.text-muted    { color: var(--color-ink-muted); }
.text-accent   { color: var(--color-accent); }
.text-deep     { color: var(--color-deep); }
.text-warm     { color: var(--color-warm); }
.text-white    { color: #FFFFFF; }

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.font-regular  { font-weight: var(--fw-regular); }
.font-medium   { font-weight: var(--fw-medium); }
.font-semibold { font-weight: var(--fw-semibold); }

.font-body    { font-family: var(--font-body); }
.font-display { font-family: var(--font-display); }

/* ============================================================
   4d. UTILITY — SFONDO
   ============================================================ */

.bg-canvas       { background-color: var(--color-canvas); }
.bg-surface      { background-color: var(--color-surface); }
.bg-surface-warm { background-color: var(--color-surface-warm); }
.bg-accent       { background-color: var(--color-accent); }
.bg-deep         { background-color: var(--color-deep); }
.bg-white        { background-color: #FFFFFF; }

/* ============================================================
   4e. UTILITY — ACCESSIBILITA
   ============================================================ */

/* Visually hidden (solo per screen reader) */
.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — visibile solo al focus */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  z-index: 9999;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-canvas);
  color: var(--color-accent);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top 150ms ease;
}

.skip-link:focus {
  top: var(--space-md);
  outline: none;
}

/* Focus visible globale — applicato dove manca stile nativo */
:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
}

/* Rimuovi outline su click (mantieni solo su keyboard) */
:focus:not(:focus-visible) {
  outline: none;
}