/* ============================================================
   IMMUSOFT — design tokens
   Imported from the Claude Design project
   "Immusoft Design System" (f25c4653-f4e5-4247-9f69-05cff81ed3e5)

   Sections marked "design system" are verbatim from that project's
   tokens/ directory. Do not hand-edit those values — re-import instead.
   The "site scales" block below extends them with the step scales
   (--fs-*, --sp-*, --shadow-*) that css/style.css consumes.
   ============================================================ */

/* ---- Webfonts --------------------------------------------------------
   SUBSTITUTION NOTICE: immusoft.com's stylesheets and font files were not
   retrievable, so these are the nearest Google Fonts matches taken from
   screenshots of the live site:
     navy serif (display + prose)  -> PT Serif
     UI sans (buttons, labels)     -> Public Sans
   Swap these files for the real webfonts if they are ever supplied. ----- */
/* Self-hosted copies (latin subset) of the Google Fonts files, both SIL Open Font
   License. Hosting them here lets every page <link rel="preload"> the two faces
   the hero uses, so they are usually ready before first paint and the hero text
   no longer rewraps and pushes the mobile CTA down (Lighthouse CLS). /fonts/ is
   cached for a year: give a changed font a new filename. */
@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/pt-serif-400.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: "PT Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/pt-serif-400-italic.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: "PT Serif";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/pt-serif-700.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: "Public Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/fonts/public-sans-300-800.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;
}

:root {
  /* ═══ design system: colors ═══ */

  /* Brand blues — sampled from the Immusoft cell-cluster logo */
  --blue-100: #E3F0F9;
  --blue-200: #BBDDF2;
  --blue-300: #8FC6EA;
  --blue-400: #57A5D8;
  --blue-500: #2B7BB9;
  --blue-600: #0F5A96;
  --blue-700: #0A4678;
  --blue-800: #073F6E;
  --blue-900: #052E52;

  /* Site navy — serif text color on immusoft.com */
  --navy: #1E3A5F;
  --navy-body: #3D4E63;

  /* Site orange — header bar on immusoft.com; ACCENT ONLY here.
     Never a large fill, never a button fill. */
  --orange: #F58220;
  --orange-deep: #D96C0A;
  --orange-soft: #FDEBD9;

  /* Ink / neutral scale */
  --ink-900: #222325;
  --ink-700: #3E4750;
  --ink-500: #5C6670;
  --ink-400: #7D8894;
  --ink-300: #AEB7C0;
  --ink-200: #D8DEE4;
  --ink-100: #EEF1F4;

  /* Surfaces — cool gray-blue from the site, warm tones from the illustrations */
  --cloud: #E9EDF2;
  --paper: #FCFAF7;
  --blush: #F6EFEA;
  --sage: #DFE8E2;
  --white: #FFFFFF;

  /* Accent from illustrations */
  --gold: #E9B44C;

  /* Semantic status */
  --success: #2E7D5B;
  --warning: #A96F14;
  --error: #B3423A;

  /* Semantic aliases */
  --brand: var(--blue-600);
  --brand-deep: var(--blue-800);
  --brand-sky: var(--blue-300);
  --brand-mist: var(--blue-100);
  --accent: var(--orange);

  --text-heading: var(--navy);
  --text-body: var(--navy-body);
  --text-muted: var(--ink-500);
  --text-on-brand: #FFFFFF;
  --text-link: var(--blue-600);

  --surface-page: var(--white);
  --surface-soft: var(--paper);
  --surface-cool: var(--cloud);
  --surface-tint: var(--blue-100);
  --surface-warm: var(--blush);
  --surface-calm: var(--sage);
  --surface-card: var(--white);
  --surface-footer: var(--blue-900);

  --border-subtle: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-focus: var(--blue-500);

  /* ═══ design system: typography ═══ */
  --font-serif: "PT Serif", Georgia, serif;
  --font-sans: "Public Sans", -apple-system, "Segoe UI", sans-serif;

  --text-display: 400 clamp(36px, 4.2vw, 52px)/1.18 var(--font-serif);
  --text-h1: 400 38px/1.22 var(--font-serif);
  --text-h2: 400 30px/1.28 var(--font-serif);
  --text-h3: 400 22px/1.4 var(--font-serif);
  --text-h4: 600 17px/1.4 var(--font-sans);
  --text-body-lg: 400 19px/1.7 var(--font-serif);
  --text-body-md: 400 17px/1.65 var(--font-serif);
  --text-body-sm: 400 14px/1.55 var(--font-sans);
  --text-quote: italic 400 24px/1.55 var(--font-serif);
  --text-eyebrow: 700 13px/1.2 var(--font-sans);
  --eyebrow-tracking: 0.14em;
  --wordmark-tracking: 0.28em;

  /* ═══ design system: spacing ═══ */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;
  --container-max: 1140px;
  --container-narrow: 760px;
  --container-pad: 24px;
  --section-pad: var(--space-9);

  /* ═══ design system: effects ═══ */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(5, 46, 82, .06), 0 8px 24px rgba(5, 46, 82, .08);
  --shadow-raised: 0 2px 4px rgba(5, 46, 82, .08), 0 16px 40px rgba(5, 46, 82, .12);
  --focus-ring: 0 0 0 3px rgba(43, 123, 185, .35);
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: 150ms;
  --dur-med: 250ms;

  /* ═══ site scales ═══
     Step scales the site templates need, derived from the design system's
     composite --text-* / --space-* tokens above. Values here must stay
     consistent with those; they are not an independent palette. */

  --font-display: var(--font-serif);
  --font-legal: var(--font-sans);

  --fs-display-xl: clamp(38px, 4.6vw, 56px);
  --fs-display-lg: clamp(30px, 3.4vw, 42px);
  --fs-display-md: clamp(26px, 2.8vw, 34px);
  --fs-display-sm: 24px;
  --fs-h1: 38px;
  --fs-h2: 30px;
  --fs-h3: 22px;
  --fs-h4: 17px;
  --fs-body-lg: 19px;
  --fs-body: 17px;
  --fs-body-sm: 14px;
  --fs-body-xs: 13px;
  --fs-caption: 13px;
  --fs-legal: 12px;

  --lh-display: 1.18;
  --lh-heading: 1.28;
  --lh-body: 1.65;
  --lh-tight: 1.4;

  --ls-display: 0;
  --ls-eyebrow: var(--eyebrow-tracking);
  --ls-body: 0;

  --fw-book: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 48px; --sp-9: 64px; --sp-10: 80px;
  --sp-11: 96px; --sp-12: 128px;

  --gutter: var(--container-pad);
  --section-y: clamp(56px, 7vw, 96px);
  --field-height: 52px;
  --tap-min: 48px;

  --radius-xs: 4px;
  --radius-xl: 28px;

  --shadow-xs: 0 1px 2px rgba(5, 46, 82, .06);
  --shadow-sm: 0 1px 2px rgba(5, 46, 82, .06), 0 4px 12px rgba(5, 46, 82, .06);
  --shadow-md: var(--shadow-card);
  --shadow-lg: var(--shadow-raised);
  --shadow-accent: 0 8px 20px rgba(15, 90, 150, .22);
  --shadow-inset-field: inset 0 0 0 1px var(--border-subtle);

  --ring: var(--focus-ring);

  --ease-in-out: cubic-bezier(.6, 0, .2, 1);
  --dur: var(--dur-med);
  --dur-slow: 420ms;

  /* Surface roles used by the section bands */
  --surface-sunken: var(--surface-cool);
  --surface-inverse: var(--blue-900);
  --surface-accent: var(--brand);
  --surface-accent-soft: var(--blue-100);

  --text-on-inverse: var(--white);
  --text-on-accent: var(--white);
  --text-heading-inverse: var(--white);
  --text-link-hover: var(--blue-800);

  --border-accent: var(--orange);
  --state-error: var(--error);
  --state-success: var(--success);
}