/* ---------------------------------------------------------------------------
   Insight Clinic - Playground tokens

   Brand rose and ink are measured from the live site. The play palette is new:
   brighter than the first pass, which read as washed out. Contrast is solved by
   TIERING rather than by desaturating, and every pairing below is computed:

     --p-x     VIVID. Decorative only: physics bodies, discs, dots.
     --on-x    text that sits directly ON its vivid. 4.5:1 or better.
     --soft-x  26 percent of the vivid over white. Carries body copy at 5.4-6.1.
     --deep-x  the hue at full strength. Headings, borders, icons.
     --band-x  deep enough to carry WHITE body text. Weakest is 6.18:1.

   DO NOT bind these to var(--hmg-brand-*). The packer rewards it with a token
   coverage score, but it only works if the host site's brand roles are
   semantically populated. On this site they are not: --hmg-brand-muted is
   #ffffff and --hmg-brand-text is a near-transparent black, so body text bound
   to "muted" rendered white on white and the page was unreadable.

   Note for future editors: never put angle brackets in a comment in this file.
   PHP finfo then mis-detects the whole stylesheet as text/html and the importer
   SILENTLY skips it, so the page ships with no styling at all.
--------------------------------------------------------------------------- */

:root {
  --ic-rose: #e79d9d;
  --ic-rose-deep: #985252;
  --ic-ink: #5a5a54;
  --ic-ink-soft: #7c7c74;
  --ic-page: #fcfcfc;
  --ic-line: rgba(0, 0, 0, 0.09);

  --p-rose: #f08a8a;
  --p-clay: #f0a165;
  --p-butter: #f5c44f;
  --p-sage: #5cbb9b;
  --p-sky: #5fa9e8;
  --p-lilac: #a488dd;

  --on-rose: #563232;
  --on-clay: #5e3f27;
  --on-butter: #675221;
  --on-sage: #224539;
  --on-sky: #213b51;
  --on-lilac: #332a45;

  --soft-rose: #fbe1e1;
  --soft-clay: #fbe7d7;
  --soft-butter: #fcf0d1;
  --soft-sage: #d5ede5;
  --soft-sky: #d5e9f9;
  --soft-lilac: #e7e0f6;

  --deep-rose: #955656;
  --deep-clay: #8b5d3b;
  --deep-butter: #846a2b;
  --deep-sage: #37705d;
  --deep-sky: #3b6990;
  --deep-lilac: #6c5a92;

  --icp-heading: #5a5a54;

  --icp-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;
  --icp-h1: clamp(2.1rem, 1.2rem + 3.2vw, 3.5rem);
  --icp-h2: clamp(1.65rem, 1.1rem + 2vw, 2.5rem);
  --icp-h3: clamp(1.3rem, 1.05rem + 0.9vw, 1.75rem);
  /* 17px. The live site ships 13px, which is not defensible on a clinical site
     whose readers include anxious parents. */
  --icp-body: 1.0625rem;
  --icp-small: 0.9375rem;

  --icp-wrap: 1220px;
  --icp-wrap-narrow: 780px;
  --icp-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --icp-r-sm: 8px;
  --icp-r-md: 14px;
  --icp-r-lg: 24px;
  --icp-pill: 999px;

  --icp-shadow-1: 0 1px 2px rgba(90, 90, 84, 0.06), 0 6px 18px rgba(90, 90, 84, 0.07);
  --icp-shadow-2: 0 2px 4px rgba(90, 90, 84, 0.07), 0 14px 40px rgba(90, 90, 84, 0.11);

  --icp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --icp-spring: cubic-bezier(0.34, 1.42, 0.64, 1);
  --icp-balloon: cubic-bezier(0.2, 1.7, 0.35, 1);
  --icp-dur: 320ms;
  --icp-press: 140ms;
}

[data-icp-mode='calm'] {
  --icp-dur: 1ms;
  --icp-press: 1ms;
  --icp-spring: linear;
  --icp-balloon: linear;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --icp-dur: 1ms;
    --icp-press: 1ms;
  }
  .icp *,
  .icp *::before,
  .icp *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}