/* ============================================================
   CLUB DEL FUMETTO — Core Design Tokens
   Colors + Typography + Spacing + Radii + Shadow systems
   ------------------------------------------------------------
   Brand language is Italian. "Storie che restano."
   Reference: see README.md + Club_del_Fumetto_Brand identity e visual.pdf
   ============================================================ */

/* ---------- Web fonts -------------------------------------- */
/*  Headline font note:
    The brand spec calls for "Archivo Expanded Black" — a wide,
    bold display sans. The client supplied Anton-Regular as the
    closest available substitute. Anton is tall + condensed,
    NOT expanded; both fonts share a heavy editorial weight.
    Until a true Archivo Expanded Black file is provided, the
    headline class loads Anton. If you have Archivo Black on
    Google Fonts, you can drop it in by overriding --font-headline. */

@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Anton-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/SpaceGrotesk-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/SpaceGrotesk-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/SpaceGrotesk-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/SpaceGrotesk-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/SpaceGrotesk-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/IBMPlexMono-Light.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexMono-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexMono-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/IBMPlexMono-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/IBMPlexMono-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/IBMPlexMono-Bold.ttf") format("truetype");
}

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* ---------- Brand palette ---------- */
  --cdf-ink:        #111111; /* Ink Black     — base type, max contrast */
  --cdf-paper:      #f4f0e8; /* Paper Cream   — primary surface, warm */
  --cdf-blue:       #3158ff; /* Electric Blue — identity, titles, CTA */
  --cdf-orange:     #ff6a2a; /* Orange        — energy, accents */
  --cdf-chartreuse: #b8ff35; /* Chartreuse    — evidence, focus, active */
  --cdf-lilac:      #c7b5ff; /* Soft Lilac    — depth, secondary */
  --cdf-white:      #ffffff;

  /* Soft tonal variants (derived, oklch) */
  --cdf-ink-80:   #3a3a3a;
  --cdf-ink-60:   #707070;
  --cdf-ink-40:   #a8a8a8;
  --cdf-paper-2:  #ebe6da; /* slightly deeper paper for cards on cream */
  --cdf-paper-3:  #ddd6c5; /* divider on cream */
  --cdf-blue-pressed:      #2546d9;
  --cdf-orange-pressed:    #e85617;
  --cdf-chartreuse-pressed:#9be022;

  /* ---------- Semantic surface / text ---------- */
  --bg:          var(--cdf-paper);
  --bg-inverse:  var(--cdf-ink);
  --bg-elevated: var(--cdf-white);   /* white card on cream */
  --surface-2:   var(--cdf-paper-2);

  --fg:          var(--cdf-ink);
  --fg-2:        var(--cdf-ink-80);
  --fg-muted:    var(--cdf-ink-60);
  --fg-inverse:  var(--cdf-paper);

  --accent:        var(--cdf-blue);       /* primary brand action */
  --accent-fg:     var(--cdf-paper);
  --highlight:     var(--cdf-chartreuse); /* "evidenza" – focus + active */
  --highlight-fg:  var(--cdf-ink);
  --energy:        var(--cdf-orange);     /* energetic accents */
  --depth:         var(--cdf-lilac);      /* secondary fills */

  --border:        var(--cdf-ink);        /* default border = ink */
  --border-soft:   var(--cdf-paper-3);
  --divider:       var(--cdf-ink);

  /* ---------- Type families ---------- */
  --font-headline: "Anton", "Archivo Black", "Archivo", Impact, "Haettenschweiler", sans-serif;
  --font-body:     "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:     "IBM Plex Mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---------- Type scale (editorial, big) ---------- */
  --t-display:  clamp(72px, 12vw, 184px);  /* CLUB / DEL / FUMETTO billboard */
  --t-h1:       clamp(56px, 7.5vw, 112px); /* Section starter */
  --t-h2:       clamp(40px, 4.6vw, 72px);
  --t-h3:       clamp(28px, 2.6vw, 40px);
  --t-h4:       22px;
  --t-eyebrow:  12px;     /* small mono labels */
  --t-meta:     11px;     /* tiniest mono caption */
  --t-body-lg:  20px;
  --t-body:     16px;
  --t-body-sm:  14px;

  --lh-tight:    0.92;
  --lh-headline: 0.95;
  --lh-snug:     1.15;
  --lh-body:     1.5;
  --lh-loose:    1.7;

  --tracking-headline: -0.01em;
  --tracking-mono:      0.06em;   /* mono labels are SPACED + UPPER */
  --tracking-mono-tight:0.04em;

  /* ---------- Spacing scale ---------- */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10:128px;
  --s-11:192px;

  /* ---------- Radii ---------- */
  --r-0: 0;          /* default — system is squared */
  --r-1: 2px;
  --r-2: 4px;
  --r-pill: 9999px;
  --r-app-icon: 22%; /* iOS-style app icon */

  /* ---------- Borders / strokes ---------- */
  --bw-hair:  1px;
  --bw:       2px;   /* default editorial frame stroke */
  --bw-thick: 4px;
  --bw-rule:  6px;   /* big horizontal rules */

  /* ---------- Shadows ----------
     The brand barely uses shadows. Cards stack via flat color
     and corner marks. Reserve these for true elevation only. */
  --shadow-0: none;
  --shadow-1: 0 1px 0 0 var(--cdf-ink);                 /* hairline under */
  --shadow-2: 4px 4px 0 0 var(--cdf-ink);               /* hard-edge offset (poster) */
  --shadow-3: 8px 8px 0 0 var(--cdf-ink);               /* bigger offset (hero) */
  --shadow-lift: 0 10px 30px -12px rgba(17,17,17,0.18); /* soft, sparingly */

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-1: 120ms;   /* hovers */
  --dur-2: 220ms;   /* toggles, small reveals */
  --dur-3: 420ms;   /* page transitions */

  /* ---------- Container ---------- */
  --container:  1280px;
  --gutter:     24px;
  --grid-cols:  12;
}

/* ============================================================
   BASE
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   SEMANTIC ROLES
   ============================================================ */

/* Display & headlines — Anton, extremely tight leading, UPPER */
.cdf-display, .cdf-h1, .cdf-h2, .cdf-h3 {
  font-family: var(--font-headline);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-headline);
  line-height: var(--lh-headline);
  color: var(--fg);
  margin: 0;
}
.cdf-display {
  font-size: var(--t-display);
  line-height: var(--lh-tight);
}
.cdf-h1 { font-size: var(--t-h1); }
.cdf-h2 { font-size: var(--t-h2); }
.cdf-h3 { font-size: var(--t-h3); }

/* H4 is the editorial sub-heading. Stays in Space Grotesk Bold,
   uppercase, smaller — used as section title above body copy. */
.cdf-h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  text-transform: none;
  letter-spacing: -0.005em;
  color: var(--fg);
  margin: 0;
}

/* Eyebrow / micro-label — mono, spaced, uppercase. The brand's
   signature "01" / "POSIZIONAMENTO" / "CLUB DEL FUMETTO —" treatment. */
.cdf-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--fg);
}
.cdf-meta {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--t-meta);
  letter-spacing: var(--tracking-mono-tight);
  color: var(--fg-2);
}

/* Body */
.cdf-body-lg { font-family: var(--font-body); font-size: var(--t-body-lg); line-height: var(--lh-body); }
.cdf-body    { font-family: var(--font-body); font-size: var(--t-body);    line-height: var(--lh-body); }
.cdf-body-sm { font-family: var(--font-body); font-size: var(--t-body-sm); line-height: var(--lh-body); }

/* Highlight tag — the iconic blue-fill text-highlight (see "Un marchio che si legge come un manifesto.") */
.cdf-highlight {
  background: var(--cdf-blue);
  color: var(--cdf-paper);
  padding: 0.05em 0.4em 0.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.cdf-highlight--chartreuse { background: var(--cdf-chartreuse); color: var(--cdf-ink); }
.cdf-highlight--orange    { background: var(--cdf-orange);     color: var(--cdf-paper); }
.cdf-highlight--lilac     { background: var(--cdf-lilac);      color: var(--cdf-ink); }

/* Code / mono inline */
code, .cdf-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--surface-2);
  padding: 0.08em 0.35em;
  border-radius: var(--r-1);
}