/* File generato da scripts/build-tokens.mjs a partire da tokens.json: non modificare a mano. */

/* Ordine dei livelli: chi viene dopo vince a parità di specificità. */
@layer tokens, base, layout, components, motion, utilities;

@layer tokens {
  :root {
    /* Primitivi · colore */
    --color-paper: #f3f0e9;
    --color-paper-deep: #251d18;
    --color-ink: #1f2923;
    --color-ink-soft: #d8ded9;
    --color-forest: #23372d;
    --color-earth: #17261f;
    --color-moss: #c3cec5;
    --color-line: rgba(255, 253, 248, 0.2);
    --color-white: #fffdf8;
    --color-footer-top: #1b2b23;
    --color-footer: #101a15;
    --color-footer-bottom: #090f0c;

    /* Primitivi · font */
    --font-display: "Comfortaa", "Trebuchet MS", sans-serif;
    --font-ui: "Source Sans 3", Arial, sans-serif;

    /* Primitivi · peso e interlinea */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --leading-none: 1;

    /* Primitivi · spazio (base 4 px) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;
    --space-11: 10rem;

    /* Primitivi · movimento */
    --dur-micro: 160ms;
    --dur-ui: 240ms;
    --dur-reveal: 640ms;
    --dur-media: 700ms;
    --dur-failsafe: 2500ms;
    --dur-instant: 0.01ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-standard: ease;
    --ease-linear: linear;
    --ease-reveal: cubic-bezier(0.33, 1, 0.68, 1);

    /* Semantici · colore (superfici, testi, bordi, velature) */
    --surface-page: var(--color-earth);
    --surface-section: var(--color-forest);
    --surface-media: var(--color-ink);
    --surface-media-warm: var(--color-paper-deep);
    --surface-inverse: var(--color-white);
    --surface-inverse-hover: var(--color-paper);
    --surface-header: rgba(35, 55, 45, 0.96);
    --surface-glass: rgba(255, 253, 248, 0.12);
    --surface-footer: var(--color-footer);
    --surface-footer-gradient: linear-gradient(145deg, var(--color-footer-top) 0%, var(--color-footer) 58%, var(--color-footer-bottom) 100%);
    --text-primary: var(--color-white);
    --text-on-photo: rgba(255, 253, 248, 0.92);
    --text-on-photo-muted: rgba(255, 253, 248, 0.82);
    --text-secondary: var(--color-ink-soft);
    --text-muted: rgba(255, 253, 248, 0.74);
    --text-faint: rgba(255, 253, 248, 0.58);
    --text-accent: var(--color-moss);
    --text-inverse: var(--color-forest);
    --border-subtle: var(--color-line);
    --border-faint: rgba(255, 253, 248, 0.12);
    --focus-ring: var(--color-white);
    --focus-halo: var(--color-ink);
    --overlay-hero: linear-gradient(180deg, rgba(12, 19, 15, 0.52) 0%, rgba(12, 19, 15, 0.58) 48%, rgba(12, 19, 15, 0.76) 100%);
    --overlay-soft: rgba(12, 19, 15, 0.52);
    --overlay-story: linear-gradient(90deg, rgba(15, 23, 18, 0.88) 0%, rgba(15, 23, 18, 0.72) 52%, rgba(15, 23, 18, 0.54) 100%);
    --map-line: rgba(255, 255, 255, 0.08);
    --map-line-strong: rgba(255, 255, 255, 0.11);

    /* Semantici · testo (fluido 360–1440 px) */
    --text-label-size: 0.75rem;
    --text-label-leading: 1.3;
    --text-label-tracking: 0.16em;
    --text-label-font: var(--font-ui);
    --text-label-weight: 500;
    --text-small-size: clamp(0.875rem, 0.8542rem + 0.0926vw, 0.9375rem);
    --text-small-leading: 1.5;
    --text-small-tracking: 0;
    --text-small-font: var(--font-ui);
    --text-small-weight: 400;
    --text-ui-size: clamp(0.875rem, 0.8542rem + 0.0926vw, 0.9375rem);
    --text-ui-leading: 1.2;
    --text-ui-tracking: 0.04em;
    --text-ui-font: var(--font-display);
    --text-ui-weight: 500;
    --text-body-size: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
    --text-body-leading: 1.65;
    --text-body-tracking: 0;
    --text-body-font: var(--font-ui);
    --text-body-weight: 400;
    --text-lede-size: clamp(1.1875rem, 1.0833rem + 0.463vw, 1.5rem);
    --text-lede-leading: 1.45;
    --text-lede-tracking: -0.005em;
    --text-lede-font: var(--font-display);
    --text-lede-weight: 400;
    --text-h4-size: clamp(1.4375rem, 1.25rem + 0.8333vw, 2rem);
    --text-h4-leading: 1.2;
    --text-h4-tracking: -0.01em;
    --text-h4-font: var(--font-display);
    --text-h4-weight: 400;
    --text-h3-size: clamp(1.75rem, 1.4583rem + 1.2963vw, 2.625rem);
    --text-h3-leading: 1.15;
    --text-h3-tracking: -0.015em;
    --text-h3-font: var(--font-display);
    --text-h3-weight: 400;
    --text-h2-size: clamp(2.0625rem, 1.5833rem + 2.1296vw, 3.5rem);
    --text-h2-leading: 1.1;
    --text-h2-tracking: -0.02em;
    --text-h2-font: var(--font-display);
    --text-h2-weight: 400;
    --text-h1-size: clamp(2.5rem, 1.75rem + 3.3333vw, 4.75rem);
    --text-h1-leading: 1.06;
    --text-h1-tracking: -0.025em;
    --text-h1-font: var(--font-display);
    --text-h1-weight: 400;
    --text-display-size: clamp(2.875rem, 1.75rem + 5vw, 6.25rem);
    --text-display-leading: 1.02;
    --text-display-tracking: -0.025em;
    --text-display-font: var(--font-display);
    --text-display-weight: 400;
    --text-display-fit-size: calc((100vw - var(--gutter) * 2) / 6.4);

    /* Semantici · spazio */
    --stack-2xs: 0.5rem;
    --stack-xs: clamp(0.75rem, 0.6667rem + 0.3704vw, 1rem);
    --stack-s: clamp(1rem, 0.8333rem + 0.7407vw, 1.5rem);
    --stack-m: clamp(1.5rem, 1.3333rem + 0.7407vw, 2rem);
    --stack-l: clamp(2rem, 1.6667rem + 1.4815vw, 3rem);
    --stack-xl: clamp(3rem, 2.3333rem + 2.963vw, 5rem);
    --section-compact: clamp(3.5rem, 2.6667rem + 3.7037vw, 6rem);
    --section: clamp(5rem, 3.3333rem + 7.4074vw, 10rem);
    --chapter: clamp(6rem, 3.8333rem + 9.6296vw, 12.5rem);
    --cluster: clamp(1rem, 0.6667rem + 1.4815vw, 2rem);

    /* Semantici · movimento */
    --rise: clamp(1rem, 0.8333rem + 0.7407vw, 1.5rem);
    --stagger: 70ms;
    --stagger-line: 90ms;
    --line-bleed: 0.14em;
    --media-inset: 8%;
    --media-zoom: 1.05;
    --hover-zoom: 1.015;
    --line-overscan: 1em;

    /* Semantici · misura del testo */
    --measure-body: 34em;
    --measure-lede: 28em;
    --measure-copy: 35rem;
    --measure-reading: 42.5rem;

    /* Layout: margini di pagina, gap di griglia e header (a gradini, come la griglia) */
    --gutter: 20px;
    --grid-gap: 16px;
    --header-h: 72px;
    --content-max: 1280px;
    --target-min: 44px;
  }

  @media (min-width: 30rem) {
    :root { --gutter: 24px; --grid-gap: 20px; }
  }

  @media (min-width: 48rem) {
    :root { --gutter: 32px; --grid-gap: 24px; --header-h: 80px; }
  }

  @media (min-width: 64rem) {
    :root { --gutter: 48px; --header-h: 96px; }
  }

  @media (min-width: 90rem) {
    :root { --gutter: 72px; --grid-gap: 32px; }
  }
}