/* rc3-tokens.css */
/* ==========================================================================
   RC v3 — Design tokens
   Source of truth: owner-approved palette + BlackRock-direction mockup
   (expert-ent-blackrock-palette-mockup.html). Values below are taken from
   that mockup verbatim. Nothing from the RC1/RC2 token set is carried over.
   ========================================================================== */

:root {
  /* --- Approved palette ------------------------------------------------- */
  --navy:  #0c2c47;
  --green: #2d5652;
  --yellow:#e2a54d;
  --aqua:  #97d3cd;
  --pink:  #efeae6;   /* warm paper — page background */
  --mint:  #e4f2ea;
  --ink:   #102331;   /* body text */
  --white: #fffdf9;

  /* Derived surfaces. color-mix keeps these locked to the palette above. */
  --rule:        rgba(12, 44, 71, .22);
  --rule-strong: rgba(12, 44, 71, .55);
  --rule-light:  rgba(255, 255, 255, .34);
  --ink-soft:    color-mix(in srgb, var(--ink) 74%, transparent);
  --ink-faint:   color-mix(in srgb, var(--ink) 76%, transparent);
  --paper-blur:  color-mix(in srgb, var(--pink) 92%, transparent);

  /* --- Type ------------------------------------------------------------- */
  /* The mockup's display face is a heavy grotesque. Arial Black is the
     approved stand-in; no webfont is downloaded for it. */
  --font-display: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif:   Georgia, "Times New Roman", Times, serif;

  --text-base:  17px;
  --leading:    1.55;

  /* Display scale — tight negative tracking is the signature of the direction */
  --h1:      clamp(46px, 6.6vw, 104px);
  --h1-sub:  clamp(38px, 4.6vw, 68px);   /* interior pages */
  --h2:      clamp(36px, 5.2vw, 78px);
  --h2-sm:   clamp(28px, 3.4vw, 46px);
  --h3:      clamp(24px, 2.6vw, 40px);
  --h4:      clamp(19px, 1.6vw, 24px);
  --lead:    clamp(18px, 1.45vw, 23px);

  --track-display: -.065em;
  --track-tight:   -.035em;
  --track-caps:    .12em;
  --leading-display: .94;

  /* --- Space / measure -------------------------------------------------- */
  --max:        1240px;
  --max-narrow: 760px;
  --pad:        clamp(20px, 4vw, 64px);
  --section-y:  clamp(72px, 9vw, 140px);
  --section-y-sm: clamp(48px, 6vw, 88px);
  --gap:        clamp(20px, 2.4vw, 34px);
  --measure:    68ch;

  /* --- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --t-fast:   .25s;
  --t-mid:    .45s;
  --t-slow:   .9s;

  /* Square corners throughout. Kept as a token so it stays deliberate. */
  --radius: 0px;

  /* --- Compatibility shims ---------------------------------------------- */
  /* Approved page content carries inline styles that reference the RC1/RC2
     token names. Content is frozen for RC3, so those names are re-pointed at
     the new scale here rather than edited out of the pages. */
  --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: 88px;
  --header-height: 112px;
  --text-h4: var(--h4);
  --text-small: 14px;
  --text-eyebrow: 12px;
  --text-body-lg: var(--lead);
  --tracking-eyebrow: .13em;
  --weight-medium: 600;
  --color-text-muted: color-mix(in srgb, var(--ink) 78%, transparent);
  --color-bg-alt: var(--mint);
  --content-max-width-narrow: var(--max-narrow);
}

/* Approved page copy sets colour inline with var(--color-text-muted) and
   var(--ink-*), which would be unreadable on the dark bands. Re-pointing the
   variables on those surfaces fixes the contrast without touching the content. */
.on-dark,
.credential-strip,
.cta-block,
.rc-service-grid,
.blog-featured,
.judgment-callout,
.second-opinion-band,
.site-footer {
  --color-text-muted: var(--mint);
  --ink-soft: var(--mint);
  --ink-faint: var(--aqua);
}
.second-opinion-band {
  --color-text-muted: color-mix(in srgb, var(--navy) 88%, transparent);
  --ink-soft: var(--navy);
  --ink-faint: var(--navy);
}
/* The homepage hero keeps its legacy .on-dark class but is a light surface in
   this direction, so it must not inherit the dark-surface text variables. */
.home-hero.on-dark {
  --color-text-muted: color-mix(in srgb, var(--ink) 78%, transparent);
  --ink-soft: color-mix(in srgb, var(--ink) 74%, transparent);
  --ink-faint: color-mix(in srgb, var(--ink) 76%, transparent);
}