/* ---------------------------------------------------------------------------
   Design-system tokens.

   Source of truth: ../../design-system/tokens/ — imported, never copied, so the
   site can't drift from the design system. Change a colour there and it changes
   here.

   tokens/fonts.css is deliberately NOT imported: it points at the brand .ttf
   files under design-system/assets/fonts/, which are not in the repo yet. The
   two families come from Google Fonts under the same names and weights instead.
   Once the brand fonts land, drop the Google import and add fonts.css.
   --------------------------------------------------------------------------- */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Syne:wght@400;500;600;700;800&display=swap");

@import url("../../design-system/tokens/colors.css");
@import url("../../design-system/tokens/typography.css");
@import url("../../design-system/tokens/spacing.css");
@import url("../../design-system/tokens/surfaces.css");
@import url("../../design-system/tokens/motion.css");

:root {
  /* Breakpoints derived from the three redesign screenshots.
     < 600px   mobile   — hamburger, single column, Florence hero background
     600–959   tablet   — hamburger + CTA, agritech hero, two-column row
     >= 960px  desktop  — full nav, 2fr 1fr 1fr mosaic */
  --bp-tablet: 600px;
  --bp-desktop: 960px;

  /* Documented deviation from the design system, see NOTE-SEZIONE-1.md: the
     hero title is lighter than --type-hero-weight (Bold) — measured on the
     live site at Regular, not Light (the mocks read lighter than Bold, but
     the live DOM computes to 400, not 300). */
  --hero-title-weight: var(--fw-regular);

  /* design-system/tokens/colors.css points --divider-image at its own
     assets/media/graphics/, which isn't in the repo (binaries weren't
     downloadable from Claude Design, see IMPORT.md). The real asset — sourced
     from the live site — lives under site/assets/graphics/ instead. A url()
     inside a custom property resolves relative to the stylesheet that
     declares it (this file, site/css/tokens.css), not to the page. */
  --divider-image: url("../assets/graphics/divider-italy.png");

  /* design-system/tokens/spacing.css sets --divider-width/-height to 120x5px,
     a placeholder guess made before the real asset was available. The actual
     divider-italy.png asset is 483x8, and the live site renders it at that
     natural size (measured: 483px wide at desktop, shrinking to fit the
     container on narrower screens) — not scaled down to 120px. */
  --divider-width: 483px;
  --divider-height: 8px;
}