/* GR Medical — Colors & Type Foundations
 * Source: Brand Manual (Jan 2024)
 * Typography: Raleway (Google Fonts) — Medium 500, Bold 700, ExtraBold 800
 */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700;800&display=swap');

:root {
  /* ===== BRAND COLORS ===== */
  /* Azzurro principale — primary brand blue (logo, primary buttons, key surfaces) */
  --gr-blue: #00679A;
  /* Azzurro scuro — testi e alti contrasti (headings, high-contrast text) */
  --gr-blue-dark: #014D6B;
  /* Azzurro secondario — secondario e alternativo (links, secondary actions) */
  --gr-blue-secondary: #0087BD;
  /* Azzurro cielo — sfondi ed elementi vivaci (lively backgrounds, highlights) */
  --gr-blue-sky: #18A1DC;

  /* ===== NEUTRALS ===== */
  --gr-white: #FFFFFF;
  --gr-bg: #FFFFFF;
  --gr-bg-soft: #F5F8FB;     /* very pale tint of brand blue */
  --gr-bg-tint: #E6F0F7;     /* card / section tint */
  --gr-border: #DCE6EE;
  --gr-border-strong: #B8CBD9;
  --gr-text: #0F2A3A;        /* near-black with cool undertone */
  --gr-text-muted: #4F6B7C;
  --gr-text-soft: #7B8E9B;
  --gr-black: #000000;

  /* ===== SEMANTIC TOKENS ===== */
  --fg: var(--gr-text);
  --fg-muted: var(--gr-text-muted);
  --fg-soft: var(--gr-text-soft);
  --fg-on-blue: var(--gr-white);
  --bg: var(--gr-bg);
  --bg-soft: var(--gr-bg-soft);
  --bg-tint: var(--gr-bg-tint);
  --accent: var(--gr-blue);
  --accent-hover: var(--gr-blue-dark);
  --accent-soft: var(--gr-blue-sky);
  --link: var(--gr-blue-secondary);

  /* ===== TYPOGRAPHY ===== */
  --font-sans: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Raleway', sans-serif;

  /* Weights — per brand manual */
  --w-regular: 400;
  --w-medium: 500;     /* Testo standard */
  --w-semibold: 600;
  --w-bold: 700;       /* Titoli */
  --w-extrabold: 800;  /* Titoli enfatici */

  /* Type scale */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 22px;
  --fs-xl: 28px;
  --fs-2xl: 36px;
  --fs-3xl: 48px;
  --fs-4xl: 64px;
  --fs-display: 80px;

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-caps: 0.08em;     /* used heavily — see "MEDICINA DEL LAVORO" tagline */

  /* ===== SPACING ===== */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* ===== RADII ===== */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ===== SHADOWS ===== */
  --shadow-sm: 0 1px 2px rgba(1, 77, 107, 0.06), 0 1px 3px rgba(1, 77, 107, 0.04);
  --shadow-md: 0 4px 12px rgba(1, 77, 107, 0.08), 0 2px 4px rgba(1, 77, 107, 0.04);
  --shadow-lg: 0 12px 32px rgba(1, 77, 107, 0.12), 0 4px 8px rgba(1, 77, 107, 0.06);
  --shadow-blue: 0 8px 24px rgba(0, 103, 154, 0.18);

  /* ===== MOTION ===== */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* ===== SEMANTIC TYPE STYLES ===== */
html, body {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  font-weight: var(--w-medium);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.gr-display {
  font-family: var(--font-display);
  font-weight: var(--w-extrabold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--gr-blue);
}

.gr-h1, h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--gr-blue);
  margin: 0;
}

.gr-h2, h2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--gr-blue);
  margin: 0;
}

.gr-h3, h3 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--gr-blue-dark);
  margin: 0;
}

.gr-h4, h4 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--gr-blue-dark);
  margin: 0;
}

/* The signature tagline treatment — wide-tracked uppercase Bold */
.gr-eyebrow,
.gr-tagline {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--gr-blue);
}

.gr-body, p {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg);
}

.gr-lead {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

.gr-small, small {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

.gr-link, a {
  color: var(--link);
  text-decoration: none;
  font-weight: var(--w-semibold);
  transition: color var(--dur-base) var(--ease-out);
}
.gr-link:hover, a:hover {
  color: var(--gr-blue-dark);
}