/* =============================================================
   Chemist2U — design tokens

   GENERATED FILE — do not edit.
   Source: design-tokens.json   Rebuild: npm run tokens

   Deliberately unlayered: Divi ships its CSS unlayered, and an
   unlayered rule always beats a layered one, so wrapping these
   in @layer would hand every conflict to Divi.
   ============================================================= */

:root {

  /* ── Colour ──────────────────────────────────────────────────── */
  --c2u-navy: #0c344a;
  --c2u-navy-deep: #082638;
  --c2u-red: #d92050;
  --c2u-red-deep: #c01b47;
  --c2u-red-soft: #fbe3e6;
  --c2u-paper: #ffffff;
  --c2u-ink: #1b2b36;
  --c2u-muted: #5a6b78;
  --c2u-line: #e6e6e6;
  --c2u-input-border: #c4cedf;

  /* ── Surfaces ────────────────────────────────────────────────── */
  --c2u-surface-paper: #ffffff;
  --c2u-surface-mist: #f4f7f9;
  --c2u-surface-soft: #fbe3e6;
  --c2u-surface-ink: #0c344a;

  /* ── Font family ─────────────────────────────────────────────── */
  --c2u-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* ── Type scale (fluid) ──────────────────────────────────────── */
  --c2u-fs-display: clamp(46px, 2.2588rem + 2.6291vw, 74px);
  --c2u-lh-display: 1.04;
  --c2u-fw-display: 600;
  --c2u-ls-display: -0.05em;
  --c2u-fs-heading-1: clamp(32px, 1.5158rem + 2.0657vw, 54px);
  --c2u-lh-heading-1: 1.08;
  --c2u-fw-heading-1: 600;
  --c2u-ls-heading-1: -0.04em;
  --c2u-fs-heading-2: clamp(24px, 1.2359rem + 1.1268vw, 36px);
  --c2u-lh-heading-2: 1.15;
  --c2u-fw-heading-2: 600;
  --c2u-ls-heading-2: -0.03em;
  --c2u-fs-heading-3: clamp(19px, 1.0775rem + 0.4695vw, 24px);
  --c2u-lh-heading-3: 1.25;
  --c2u-fw-heading-3: 600;
  --c2u-ls-heading-3: -0.015em;
  --c2u-fs-heading-4: 16px;
  --c2u-lh-heading-4: 1.35;
  --c2u-fw-heading-4: 600;
  --c2u-ls-heading-4: -0.01em;
  --c2u-fs-lead: clamp(18px, 1.059rem + 0.2817vw, 21px);
  --c2u-lh-lead: 1.55;
  --c2u-fw-lead: 400;
  --c2u-ls-lead: -0.01em;
  --c2u-fs-body-large: 18px;
  --c2u-lh-body-large: 1.6;
  --c2u-fw-body-large: 400;
  --c2u-fs-body: 16px;
  --c2u-lh-body: 1.6;
  --c2u-fw-body: 400;
  --c2u-fs-body-small: 14px;
  --c2u-lh-body-small: 1.5;
  --c2u-fw-body-small: 400;
  --c2u-fs-eyebrow: 12px;
  --c2u-lh-eyebrow: 1;
  --c2u-fw-eyebrow: 600;
  --c2u-ls-eyebrow: 0.14em;
  --c2u-fs-label: 16px;
  --c2u-lh-label: 1;
  --c2u-fw-label: 600;

  /* ── Spacing ─────────────────────────────────────────────────── */
  --c2u-space-1: 4px;
  --c2u-space-2: 8px;
  --c2u-space-3: 12px;
  --c2u-space-4: 16px;
  --c2u-space-5: 24px;
  --c2u-space-6: 32px;
  --c2u-space-7: 40px;
  --c2u-space-8: 56px;
  --c2u-space-9: 72px;
  --c2u-space-10: 96px;
  --c2u-space-11: 128px;

  /* ── Radius ──────────────────────────────────────────────────── */
  --c2u-radius-sm: 10px;
  --c2u-radius-md: 14px;
  --c2u-radius-lg: 24px;
  --c2u-radius-xl: 32px;
  --c2u-radius-pill: 999px;

  /* ── Layout ──────────────────────────────────────────────────── */
  --c2u-container: 1440px;
  --c2u-measure: 68ch;
  --c2u-gutter: 56px;
  --c2u-gutter-tablet: 32px;
  --c2u-gutter-mobile: 20px;
  --c2u-section-y: clamp(72px, 3.2676rem + 5.2582vw, 128px);

  /* ── Elevation ───────────────────────────────────────────────── */
  --c2u-shadow-sm: 0 1px 2px rgba(12,52,74,.06), 0 2px 8px rgba(12,52,74,.05);
  --c2u-shadow-md: 0 6px 20px rgba(12,52,74,.10);
  --c2u-shadow-lg: 0 18px 44px -12px rgba(12,52,74,.22);

  /* ── Motion ──────────────────────────────────────────────────── */
  --c2u-fast: 150ms;
  --c2u-base: 220ms;
  --c2u-ease: cubic-bezier(.22,.61,.36,1);
  --c2u-ease-rise: cubic-bezier(.165,.84,.44,1);
  --c2u-enter: 650ms;
  --c2u-enter-slow: 700ms;
}

/* The deployed c2u-header.css defines these unprefixed names on :root.
   Re-declared here with identical values so load order can never change
   the header's appearance. Do not diverge from the shadow/md and font/body
   tokens above. */
:root {
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --shadow-md: 0 6px 20px rgba(12,52,74,.10);
}