/* Tokens — l'unico file da riscrivere per ribrandizzare o riusare altrove.
   I moduli consumano SOLO le variabili neutre mappate in fondo: mai i
   --techne-* direttamente. Oggi la regola è rispettata da navbar, footer,
   chip-field, hero-reveal, steps e cta; base, benefici, block, cards e
   cine-engine usano ancora --techne-* diretti (eredità dello split di
   Fase 2a, che non poteva cambiare CSS: li neutralizza la Fase 3). */

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  /* Palette del brand */
  --techne-cream: #f4efe2;
  --techne-sage: #7e9b6e;
  --techne-sage-deep: #557245;
  --techne-copper: #b9825a;
  --techne-copper-deep: #8c5a2f;
  --techne-ink: #4a4a42;
  --techne-ink-deep: #343a30;
  --techne-dark: #2e332a;
  --techne-glass: rgb(244 239 226 / 78%);
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Navbar (consumate da navbar.css) */
  --nav-fg: var(--techne-ink-deep);
  --nav-accent: var(--techne-copper);
  --nav-surface: var(--techne-cream);
  --nav-border: rgb(74 74 66 / 15%);
  --nav-scrim: rgb(46 51 42 / 45%);
  --nav-shadow: rgb(46 51 42 / 25%);
  --nav-bar-bg: var(--techne-dark);
  --nav-bar-fg: var(--techne-cream);
  --nav-bar-accent: var(--techne-sage);

  /* Footer (consumate da footer.css) */
  --footer-bg: var(--techne-dark);
  --footer-fg: var(--techne-cream);
  --footer-accent: var(--techne-sage);
  --footer-divider: rgb(244 239 226 / 25%);

  /* Chip-field (consumate da chip-field.css) */
  --chip-bg: var(--techne-glass);
  --chip-fg: var(--techne-ink-deep);
  --chip-border: rgb(255 255 255 / 45%);
  --chip-dot: var(--techne-sage);
  --chip-shadow: 0 12px 32px rgb(58 48 38 / 10%);
  --chip-blur: 12px;

  /* --chip-radius-pill NON va mappato: il default del componente è metà
     dell'altezza misurata dal JS (curvatura costante durante la crescita) e
     il calc deve risolversi sul bottone, non su :root. Impostalo solo per
     forzare un raggio fisso. */
  --chip-radius-card: 16px;
  --chip-max-w-pill: 15rem;
  --chip-max-w-card: 22rem;
  --chip-pad-pill: 0.3rem 0.7rem;
  --chip-pad-card: 0.9rem 1.1rem;
  --chip-duration: 0.4s;
  --chip-ease: ease;
  --chip-gap: 12px;

  /* Step del ciclo (consumate da homepage.css) */
  --steps-node: var(--techne-copper);
  --steps-num: var(--techne-copper-deep);
  --steps-tot-fg: var(--techne-sage-deep);
  --steps-border: rgb(185 130 90 / 35%);
  --steps-tick: var(--techne-copper-deep);
  --steps-halo: rgb(255 196 120 / 60%);
  --steps-rail-on: var(--techne-copper);
  --steps-rail-off: var(--techne-sage);
  --steps-rail-trace: rgb(126 155 110 / 45%);
}

/* Su schermi molto larghi i chip a misura fissa stonano per piccolezza:
   la superficie personalizzabile del componente (le sue custom property)
   si rimappa qui, senza toccare chip-field.css. */
@media (width >= 1600px) {
  :root {
    --chip-max-w-pill: 18rem;
    --chip-max-w-card: 26rem;
    --chip-pad-pill: 0.45rem 0.95rem;
    --chip-pad-card: 1.1rem 1.3rem;
  }
}