/* ============================================================================
 * base.css — design-system foundation for the Sella Farmaceutici form pages.
 *
 * The demo (Tailwind v3 + shadcn/ui) gets all of this from its compiled `@layer
 * base` (Tailwind preflight + the shadcn base). Our hand-authored pages don't
 * inherit that, so this file replicates the subset the chrome + form markup depend
 * on: the design tokens, the self-hosted fonts, and the preflight/reset defaults.
 * Without it, chrome.css kept rediscovering missing base defaults one at a time
 * (box-sizing, border-color, img max-width, line-height) — each a rendering drift.
 *
 * LOAD ORDER: base.css must load BEFORE chrome.css / page CSS on every page.
 * SOURCE: web/assets/index-vmVLlGsH.css (Tailwind v3 preflight) + the shadcn base
 *   rule `* { border-color: hsl(var(--border)) }`. Values verified against the bundle.
 * ============================================================================ */

/* --- design tokens (verbatim from the demo :root; the full set is snapshotted in
 *     docs/design-baseline/chrome-tokens.demo.css) --- */
:root {
  --primary: 221 91% 56%;
  --primary-foreground: 0 0% 100%;
  --background: 228 100% 99%;
  --foreground: 228 50% 11%;
  --border: 228 48% 93%;
  --max-width: 1280px;
  --shadow-sm: 0 2px 8px rgba(38, 53, 140, .08), 0 1px 2px rgba(38, 53, 140, .04);
  --font-display: "Syne", sans-serif;
  --font-body: "DM Sans", sans-serif;

  /* --- promoted from docs/design-baseline/page-tokens.demo.css (2026-07-09,
   *     /contatti visual-parity build): the page-body tokens beyond the chrome
   *     subset above — surfaces (card/secondary/muted), the promo gradient +
   *     accent, and the rest of the elevation/radius scale. --- */
  --card: 0 0% 100%;
  --card-foreground: 228 50% 11%;
  --secondary: 224 100% 97%;
  --secondary-foreground: 228 55% 35%;
  --muted: 228 60% 97%;
  --muted-foreground: 222 22% 49%;
  --blue-electric: 220 100% 62%;
  --gradient-cmo: linear-gradient(135deg, hsl(228 50% 11%) 0%, hsl(228 62% 25%) 60%, hsl(228 55% 35%) 100%);
  --shadow-md: 0 8px 24px rgba(38, 53, 140, .1), 0 2px 6px rgba(38, 53, 140, .06);
  --shadow-lg: 0 20px 48px rgba(38, 53, 140, .14), 0 4px 12px rgba(38, 53, 140, .08);
  --radius: .75rem;
  /* rounded-xl  => 1rem   (stat tiles, static-map frame) */
  /* rounded-2xl => 1.5rem (address + form cards) */
}

/* --- self-hosted fonts (no Google CDN: avoids hotlinking EU visitor IPs to Google
 *     per GDPR, and removes a render-blocking cross-origin request).
 *   Files    : src/assets/fonts/*.woff2  (served relative to this stylesheet)
 *   Families : Syne (display) 700 · DM Sans (body) 400 normal + 400 italic
 *   Subsets  : latin + latin-ext  (latin-ext carries the Italian accented glyphs)
 *   Fetched  : 2026-07-05 from Google Fonts' gstatic CDN via the css2 API
 *              (Syne v24, DM Sans v17), re-hosted here. Both SIL OFL 1.1.
 *   font-display: swap kept for fast first paint. --- */
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/syne-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/syne-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dmsans-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dmsans-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dmsans-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dmsans-400-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- preflight / reset — the subset of Tailwind preflight + shadcn base our markup
 *     relies on. Each line is matched to the demo bundle; the four inline notes mark
 *     defaults whose absence previously caused a visible chrome drift. --- */

*,
*::before,
*::after {
  box-sizing: border-box;            /* [drift] width/max-width include padding */
  border-width: 0;                   /* borders off until a border-* sets a width, */
  border-style: solid;               /*   styled solid so utilities only set width */
  border-color: hsl(var(--border));  /* [drift] shadcn default border color */
}

html {
  line-height: 1.5;                  /* [drift] base line-height (footer rhythm) */
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

body {
  margin: 0;
  line-height: inherit;
}

/* element resets (preflight) */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}
p, figure, blockquote, dl, dd, pre {
  margin: 0;
}
ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
img, svg, video {
  display: block;
  max-width: 100%;                   /* [drift] lets images shrink to fit their box */
  height: auto;
}
a {
  color: inherit;
  text-decoration: inherit;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* --- page-structural utilities (not chrome-specific, shared by page bodies:
 *     contatti/farmacovigilanza/lavora-con-noi reuse the same promo band) ---
 *     Source: docs/design-baseline/page-tokens.demo.css, verbatim. */

/* Frosted-glass stat tiles on the dark gradient promo band. */
.glass {
  background: #ffffff14;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .12);
}

/* Subtle film-grain over the gradient promo band. */
.noise-overlay {
  position: relative;
}
.noise-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: .03;
  pointer-events: none;
  z-index: 1;
}