/* ==========================================================================
   Integrated Biosciences — Design tokens
   Transcribed from the source's compiled app-styles.css `:root` block.
   Values are the source's own; do not "tidy" them.

   Two ramps are in play and they are NOT the same:
     - the type ramp, origin 27.5rem (440px), used by every font-size
     - the section-padding ramp, which the CMS writes inline as
       clamp(MIN, calc(A + B*cqw), MAX) against `main.page-main`'s inline size,
       so its origin is 0 and its ceiling lands at 1620px (= 1524 + 2*48)
   ========================================================================== */

:root {
  /* ---- Palette: nine steps, not seven --------------------------------
     Retuned to the ink clip in `assets/video/0921.mp4`: a blue pigment
     blooming in water. Two notes only — the paper the clip floats on and
     the pigment itself — which is why every step below is a blue.

     The clip's own readings, top to bottom:
       ambient field  #eaeaf6 → #dce1ea     the paper
       light wash     #bad2f6               the bloom's edge
       strong blue    #5a96f6 → #5081e9     the pigment at full strength
     The accent is that pigment taken darker so white text clears AA on it;
     the ink is the same hue taken all the way down to a readable text navy. */
  --color--1: #cfdaee;   /* the dimmed half of a split heading, hairlines  */
  --color--2: #4f83ec;   /* the clip's blue — label square, hover accents  */
  --color--3: #2f63e6;   /* the accent, deepened — buttons and links       */
  --color--4: #dfe7f6;
  --color--5: #e4eaf6;   /* the text-reveal curtain                        */
  --color--6: #eef1f8;   /* the page canvas — the clip's ambient field     */
  --color--7: #0a1734;   /* the ink — pigment taken to text navy           */
  --color--8: #f5f8fd;
  --color--9: #1b3f8f;   /* mid navy — the second card ground              */
  --color--7-rgb: 10, 23, 52;

  --base--background-color: #eef1f8;
  --base--text-color: #0a1734;
  --base--font-family: var(--family--1);
  --base--font-size: 16px;
  --base--font-weight: 400;
  --base--line-height: 1em;

  --family--1: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --family--2: var(--family--1);

  --headings-weight: 400;
  --headings-bold-weight: 400;

  --transition-ease--1: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out--1: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-button: cubic-bezier(0.25, 1, 0.5, 1);

  --outline-color: var(--color--7);
  --outline-style: solid;
  --outline-width: 4px;
  --outline-offset: 4px;
  --outline-transition-duration: 0.15s;

  /* ---- Layout -------------------------------------------------------- */
  --container-max-width-1: 1524px;
  --gap: 20px;
  --container-padding-sm: 24px;
  --container-padding-lg: 48px;
  --container-padding: var(--container-padding-sm);
  --grid-column-count: 12;
  --grid-gap: calc(var(--container-padding) / 2);
  --cw: 100vw;

  /* ---- Type ramp ------------------------------------------------------
     Every size is max(MIN, min(calc(MIN + k * (100vw - 27.5rem)), MAX)).
     The origin is 27.5rem = 440px on every one of them. */
  --text-mono-sm: max(0.75rem, min(calc(0.75rem + 0.002 * (100vw - 27.5rem)), 0.875rem));
  --text-mono-md: max(0.8125rem, min(calc(0.8125rem + 0.002 * (100vw - 27.5rem)), 0.9375rem));

  --text-body: max(1rem, min(calc(1rem + 0.003 * (100vw - 27.5rem)), 1.1875rem));
  --text-body-lg: max(1rem, min(calc(1rem + 0.006 * (100vw - 27.5rem)), 1.375rem));
  --text-excerpt: max(1.25rem, min(calc(1.25rem + 0.004 * (100vw - 27.5rem)), 1.5rem));
  --text-subheading: max(1.625rem, min(calc(1.625rem + 0.002 * (100vw - 27.5rem)), 1.75rem));
  --text-heading-sm: max(1.1875rem, min(calc(1.1875rem + 0.023 * (100vw - 27.5rem)), 2.625rem));
  --text-heading-md: max(1.375rem, min(calc(1.375rem + 0.014 * (100vw - 27.5rem)), 2.25rem));
  --text-heading-lg: max(1.625rem, min(calc(1.625rem + 0.05 * (100vw - 27.5rem)), 4.75rem));
  --text-display: max(3rem, min(calc(3rem + 0.042 * (100vw - 27.5rem)), 5.625rem));
  --text-hero: max(3.125rem, min(calc(3.125rem + 0.062 * (100vw - 27.5rem)), 7rem));
  --text-scroller: max(1.875rem, min(calc(1.875rem + 0.028 * (100vw - 27.5rem)), 3.625rem));
  --text-marquee: max(3.375rem, min(calc(3.375rem + 0.106 * (100vw - 27.5rem)), 10rem));

  --leading-tight: 1em;
  --leading-heading: 1.1em;
  --leading-body: 1.3em;
  --leading-excerpt: 1.2em;
  --tracking: -0.02em;
  --tracking-hero: -0.03em;

  --block-block-radius: 20px;
  --block-ascent-height: 12px;

  /* ---- Fluid gaps the CMS owns --------------------------------------- */
  --block-content-gap: max(20px, min(calc(20px + 0.04 * (100vw - 440px)), 60px));
  --post-content-gap: max(20px, min(calc(20px + 0.04 * (100vw - 440px)), 60px));

  --header-inset: 20px;
  --header-height: 64px;
}

@media (min-width: 1025px) {
  :root {
    --container-padding: var(--container-padding-lg);
    --grid-gap: var(--container-padding);
    --block-block-radius: 40px;
  }
}