/* Alessio Pellegrini: token del design system.
   Carica prima questo file, poi components.css. I font stanno in fonts/. */

@font-face { font-family: "Gloock"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/gloock-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/dm-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("fonts/dm-sans-latin-500-normal.woff2") format("woff2"); }

:root {
  /* colore */
  --ground: #000000;
  --surface-raised: #111111;
  --surface-inverse: #EDE8E4;
  --ink: #FFFFFF;
  --ink-inverse: #000000;
  --ink-muted: #777777;
  --line: #FFFFFF;
  --brand: #C4FF23;
  --on-brand: #000000;

  /* famiglie */
  --font-display: "Gloock", serif;
  --font-sans: "DM Sans", -apple-system, system-ui, "Segoe UI", sans-serif;

  /* raggi */
  --radius-sm: 7px;
  --radius-md: 25px;
  --radius-full: 200px;

  /* spaziatura misurata sul sito */
  --space-badge-y: 5.2px;
  --space-badge-x: 10.4px;
  --space-field-y: 11px;
  --space-field-x: 15px;

  /* spaziatura di layout (proposta, multipli di 8) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
}

html { background: var(--ground); color: var(--ink); }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 17px/31px var(--font-sans); letter-spacing: -0.34px; }

/* stili tipografici */
.ap-hero     { font: 400 clamp(44px, 6vw, 61.44px)/1 var(--font-display); }
.ap-overlay  { font: 400 clamp(56px, 12vw, 122.88px)/1.3 var(--font-display); }
.ap-headline { font: 400 41px/53px var(--font-display); }
.ap-index    { font: 400 14px/normal var(--font-display); }
.ap-body     { font: 400 17px/31px var(--font-sans); letter-spacing: -0.34px; }
.ap-paragraph{ font: 400 16px/25.6px var(--font-sans); letter-spacing: -0.34px; }
.ap-nav      { font: 400 16px/31px var(--font-sans); letter-spacing: -0.34px; }
.ap-label    { font: 400 13px/normal var(--font-sans); letter-spacing: 1.3px; text-transform: uppercase; }
.ap-footer-link { font: 400 13px/normal var(--font-sans); letter-spacing: -0.34px; }
.ap-legal    { font: 400 14px/normal var(--font-sans); color: var(--ink-muted); }
h1, h2, h3, h4 { font-weight: 400; font-style: normal; margin: 0; }