/* tokens.css - company-formation-in-italy.com (FormaItalia). The source of truth for colour, type, space and shape
 * (DESIGN.md sections 1-4). Three layers: primitives (--p-*), semantic roles (--c-*, --f-*, --s-*), components
 * (--btn-*, --card-*, --field-*). Measured from the owner's design variant A (the browser save of advant-nctm.com,
 * harvested 2026-10-12 to drafts/design-harvest/variant-a and variant-a-live): white ground, #ededed bands, dark grey
 * #5a5a5a, radii 40 / 20 / 14 px and the soft shadow 0 5px 19px rgba(0,0,0,.17). The owner's decisions of 2026-10-12:
 * the accent is wine #8A1E52 (replacing the reference's #ad1839) and the faces are Red Hat Display + Red Hat Text
 * (replacing Proxima Nova). oklch values, the hex each one resolves to in the comment. */
:root {
  /* ---------- primitives ---------- */
  --p-wine-900: oklch(24.6% 0.075 354);     /* #3a0d23  deepest wine, text on the pale rose */
  --p-wine-700: oklch(36.7% 0.126 356.1);   /* #6e1741  hover and pressed */
  --p-wine-600: oklch(43.1% 0.150 356.4);   /* #8a1e52  THE accent (owner, 2026-10-12) */
  --p-wine-400: oklch(51.1% 0.161 354.4);   /* #a8336c  focus ring */
  --p-wine-200: oklch(76.3% 0.045 348.2);   /* #c9a7b7  bullets, the reference's #d4a7a4 tint moved onto the wine hue */
  --p-wine-50:  oklch(94.6% 0.016 347.6);   /* #f6e9ef  pale rose: callouts, the practice note */
  --p-white:    oklch(100% 0 0);            /* #ffffff  the reference's ground */
  --p-grey-50:  oklch(97.3% 0 0);           /* #f6f6f6  soft surface (table heads, field fill) */
  --p-grey-100: oklch(94.6% 0 0);           /* #ededed  the reference's light band */
  --p-grey-200: oklch(91.3% 0 0);           /* #e2e2e2  hairlines */
  --p-grey-400: oklch(78.6% 0 0);           /* #b9b9b9  strong hairline, disabled */
  --p-grey-600: oklch(46.8% 0 0);           /* #5a5a5a  the reference's dark grey: footer ground, muted text */
  --p-grey-700: oklch(39.8% 0 0);           /* #474747  body text (9.4:1 on white, 7.9:1 on #ededed) */
  --p-grey-900: oklch(28.9% 0 0);           /* #2b2b2b  ink: H3, table text, strong */
  --p-scrim:    oklch(18% 0 0 / 0.62);      /* the hero scrim over the black-and-white photograph */

  /* ---------- semantic ---------- */
  --c-bg: var(--p-white);
  --c-band: var(--p-grey-100);              /* alternate sections, CTA bands */
  --c-soft: var(--p-grey-50);
  --c-text: var(--p-grey-700);
  --c-ink: var(--p-grey-900);
  --c-muted: var(--p-grey-600);
  --c-line: var(--p-grey-200);
  --c-line-strong: var(--p-grey-400);
  --c-accent: var(--p-wine-600);            /* headings H2, outlines, links, the figures band */
  --c-accent-hover: var(--p-wine-700);
  --c-accent-ink: var(--p-wine-600);        /* the accent used as a foreground (8.7:1 on white) */
  --c-accent-tint: var(--p-wine-50);
  --c-accent-soft: var(--p-wine-200);
  --c-on-accent: var(--p-white);
  --c-footer: var(--p-grey-600);
  --c-on-footer: var(--p-white);
  --c-focus: var(--p-wine-400);

  /* type: Red Hat Display for headings and figures, Red Hat Text for running copy (self-hosted, fonts.css) */
  --f-display: 'Red Hat Display', 'Helvetica Neue', Arial, sans-serif;
  --f-text: 'Red Hat Text', 'Helvetica Neue', Arial, sans-serif;
  --w-display: 800;                         /* the reference sets its headings extra-bold (Proxima Nova 800) */
  --w-strong: 700;
  --w-medium: 500;
  --w-body: 400;
  --f-h1: clamp(2.25rem, 1.2rem + 4.2vw, 4.6rem);       /* 36 -> 74 px, the reference's H1 */
  --f-h1-inner: clamp(2rem, 1.2rem + 3.2vw, 3.75rem);   /* 32 -> 60 px on service and guide heroes */
  --f-h2: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);        /* 28 -> 44 px */
  --f-h3: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);     /* 18 -> 22 px */
  --f-figure: clamp(2.1rem, 1.4rem + 1.9vw, 3.1rem);    /* the key-figures numerals: "EUR 50,000" fits a quarter of 1180 px */
  --f-body: 1.0625rem;                                  /* 17 px */
  --f-small: 0.9375rem;                                 /* 15 px */
  --f-tiny: 0.8125rem;                                  /* 13 px, the reference's meta size */
  --f-kicker: 0.8125rem;
  --lh-body: 1.65;
  --lh-tight: 1.08;
  --ls-caps: 0.06em;

  /* space (4 px base) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 2.5rem; --s-8: 3.5rem; --s-9: 5rem;
  --sec-pad: clamp(3.25rem, 2rem + 4vw, 6rem);
  --side-pad: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);
  --max-width: 1180px;                       /* the reference's container */
  --header-h: 84px;                          /* the reference's header */

  /* shape: the reference's three radii and one shadow */
  --r-xl: 40px;                              /* large frames: photographs, the form card, the office card */
  --r-lg: 20px;                              /* cards, tables */
  --r-md: 14px;                              /* chips, small tiles */
  --r-pill: 999px;                           /* buttons and fields (the reference's 37-43 px pills) */
  --shadow: 0 5px 19px oklch(0% 0 0 / 0.17);
  --shadow-soft: 0 3px 12px oklch(0% 0 0 / 0.10);

  /* ---------- components ---------- */
  --btn-h: 52px;
  --btn-border: 2px solid var(--c-accent);
  --btn-text: var(--c-accent-ink);
  --btn-hover-bg: var(--c-accent);
  --btn-hover-text: var(--c-on-accent);
  --btn-hero-bg: oklch(100% 0 0 / 0.88);
  --btn-hero-text: var(--p-grey-900);
  --card-bg: var(--p-white);
  --card-radius: var(--r-lg);
  --card-shadow: var(--shadow);
  --card-pad: clamp(1.25rem, 1rem + 1vw, 2rem);
  --field-h: 50px;
  --field-border: 2px solid var(--c-line-strong);
  --field-border-focus: 2px solid var(--c-accent);
  --field-radius: 28px;                      /* the reference's form fields */
  --rule: 1px solid var(--c-accent);         /* the heading's left rule (h2_left-line) */

  --t-fast: 0.3s ease-in-out;                /* the reference's transitions: 0.3 to 0.5 s ease-in-out */
  --t-slow: 0.5s ease-in-out;
}