/* margheritabullo.com — design tokens estratti dal Figma
   File 4I0X1H8sWtUYEHrsNHIdFf, frame 7:3 "Margherita Bullo homepage" */

@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/DMSerifDisplay-400.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/DMSerifDisplay-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Inter-var.woff2') format('woff2');
}

:root {
  /* Colore */
  --c-cream:      #fffdf5; /* fondo pagina, testo su scuro */
  --c-ink:        #202219; /* testo primario, bottoni scuri */
  --c-olive:      #35400c; /* testo secondario, fondi sezione scuri */
  --c-olive-deep: #2a3308; /* card contatti, fascia cookie */
  --c-moss:       #73891c; /* etichette, filetti, bordi */
  --c-lime:       #b5c956; /* etichette su fondo scuro, divider */
  --c-lime-light: #e3ebba; /* fondi chiari d'accento, card 02, statement */
  --c-paper:      #f7f8f3; /* fondo sezione bio */
  --c-blush:      #fceee9; /* fondo card ritratto */
  --c-accent:     #e04e28; /* accento rosso-arancio: span, link Contatti, rule 02 */
  --c-accent-text: #c8431f; /* stesso accento scurito per le parole chiave nel testo corrente: 4.6:1 su paper/cream (AA) */

  /* Tipografia */
  --font-serif: 'DM Serif Display', Georgia, serif;
  --font-sans: 'Inter', -apple-system, system-ui, sans-serif;

  /* Scala (desktop Figma → clamp responsive) */
  --step-label: 13px;                                   /* etichette uppercase */
  --step-nav: 14px;                                     /* nav, bottoni */
  --step-body-s: 15px;                                  /* descrizioni card */
  --step-body: clamp(16px, 15px + 0.3vw, 18px);         /* corpo */
  --step-contact: 17px;                                 /* righe contatti */
  --step-lede: clamp(18px, 16px + 0.5vw, 22px);         /* lede hero */
  --step-card-title: clamp(23px, 20px + 0.6vw, 28px);   /* titoli card */
  --step-h2: clamp(34px, 24px + 2.1vw, 64px);           /* heading bio/statement/contatti */
  --step-h2-s: clamp(30px, 22px + 1.8vw, 48px);         /* heading aree */
  --step-domain: clamp(34px, 20px + 3.9vw, 76px);       /* domain nel footer */
  --step-display: clamp(52px, 34px + 4.9vw, 104px);     /* nome nell'hero */

  /* Spaziatura e raggi */
  --gutter: clamp(20px, 5vw, 72px);  /* padding orizzontale sezioni */
  --sect-y: clamp(64px, 8vw, 112px); /* padding verticale sezioni */
  --radius-card: 20px;
  --radius-pill: 999px;
  --radius-portrait: 40px 40px 40px 220px; /* tl tr br bl */
  --max-w: 1440px;
}