/* PE Desk — design tokens
   Professional healthcare PE aesthetic: deep navy, teal accent,
   warm parchment neutrals, serif display type. */

:root {
  /* Navy scale (primary) */
  --sc-ink:        #061626;     /* darkest, for heavy headers */
  --sc-navy:       #0b2341;     /* primary surface */
  --sc-navy-2:     #132e53;     /* hover / one-step lighter */
  --sc-navy-3:     #1d3c69;     /* dividers on navy */

  /* Accent (teal, per reference) — D2: --sc-teal flipped from
     the bright #2fb3ad mint to #155752 (same as --sc-teal-ink) so
     the cream + navy + amber editorial palette gets a single
     deep-teal accent across all 233 var(--sc-teal) / var(--accent)
     usages. --sc-data-1 stays #2fb3ad below for data-viz chart-
     color distinguishability; --sc-teal-2 stays #66c8c3 for its
     few mint-accent uses (wordmark em, user-chip hover). */
  --sc-teal:       #155752;
  --sc-teal-2:     #66c8c3;
  --sc-teal-ink:   #155752;     /* dark teal text on light */

  /* Warm neutrals */
  --sc-parchment:  #f2ede3;     /* warm off-white page bg */
  --sc-bone:       #ece5d6;     /* alt tonal bg */
  --sc-rule:       #d6cfc0;     /* hairline rules on parchment */
  --sc-rule-2:     #bfb6a2;

  /* Text on light */
  --sc-text:       #1a2332;
  --sc-text-dim:   #465366;
  --sc-text-faint: #7a8699;

  /* Text on navy */
  --sc-on-navy:         #e9eef5;
  --sc-on-navy-dim:     #a5b4ca;
  --sc-on-navy-faint:   #6e7e99;

  /* Status */
  --sc-positive:   #0a8a5f;
  --sc-warning:    #b8732a;
  --sc-negative:   #b5321e;
  --sc-critical:   #8a1e0e;

  /* Chart data (kept muted — pairs with teal) */
  --sc-data-1:     #2fb3ad;
  --sc-data-2:     #3a6fb0;
  --sc-data-3:     #b8732a;
  --sc-data-4:     #5c3e8c;
  --sc-data-5:     #0a8a5f;

  /* Type */
  --sc-serif:      'Source Serif 4', 'Source Serif Pro', 'Iowan Old Style', 'Georgia', serif;
  --sc-sans:       'Inter Tight', -apple-system, 'Segoe UI', sans-serif;
  --sc-mono:       'JetBrains Mono', 'SF Mono', 'Consolas', monospace;

  /* Spacing scale (8pt-ish, with 4 and 2 for fine control).
   * 2026 breathing-room pass: the layout-range tokens (s-4..s-9) were bumped
   * ~12-17% because partners read the pages as "everything too close / text
   * clutter — almost wants to be zoomed out 5-10%". Fine-control tokens
   * (s-1..s-3) stay put so tight inline gaps don't drift. Every margin/padding/
   * gap built on these tokens gains air at once, across all ~300 pages. */
  --sc-s-1: 2px;
  --sc-s-2: 4px;
  --sc-s-3: 8px;
  --sc-s-4: 14px;
  --sc-s-5: 19px;
  --sc-s-6: 28px;
  --sc-s-7: 38px;
  --sc-s-8: 54px;
  --sc-s-9: 72px;
  --sc-s-10: 104px;

  /* Radii — deliberately small. Institutional. */
  --sc-r-1: 2px;
  --sc-r-2: 4px;

  /* Elevation — deliberately subtle */
  --sc-shadow-1: 0 1px 2px rgba(6, 22, 38, 0.06);
  --sc-shadow-2: 0 6px 24px rgba(6, 22, 38, 0.08);
  --sc-shadow-3: 0 18px 48px rgba(6, 22, 38, 0.12);

  /* ── Compatibility aliases ─────────────────────────────────────
   * Legacy CAD-era (Bloomberg-style) and v3-marketing tokens map to
   * the editorial canonical tokens above so renderers written before
   * the editorial uplift inherit Chartis colors without per-file
   * rewrites. Every alias is a one-line forward; the editorial
   * --sc-* token is the source of truth. */

  /* Cadence (legacy Bloomberg) → editorial */
  --cad-pos:        var(--sc-positive);
  --cad-neg:        var(--sc-negative);
  --cad-warn:       var(--sc-warning);
  --cad-accent:     var(--sc-teal);
  --cad-bg:         var(--sc-parchment);
  --cad-panel:      #ffffff;
  --cad-text:       var(--sc-text);
  --cad-text2:      var(--sc-text-dim);
  --cad-text3:      var(--sc-text-faint);
  --cad-border:     var(--sc-rule);

  /* Legacy chartis-kit (--ck-*) → editorial. These were defined only in
   * _chartis_kit_legacy.py's _BASE_CSS, which the modern shell no longer
   * injects — so ~18 renderers still referencing var(--ck-mono)/(--ck-accent)
   * /etc. (incl. the Portfolio-Sim button background) resolved to nothing.
   * Forward them here, where chartis_tokens.css is loaded on every page. */
  --ck-bg:          var(--sc-parchment);
  --ck-panel:       #ffffff;
  --ck-panel-alt:   var(--sc-bone);
  --ck-border:      var(--sc-rule);
  --ck-border-dim:  var(--sc-rule);
  --ck-text:        var(--sc-text);
  --ck-text-dim:    var(--sc-text-dim);
  --ck-text-faint:  var(--sc-text-faint);
  --ck-accent:      var(--sc-teal);
  --ck-pos:         var(--sc-positive);
  --ck-neg:         var(--sc-negative);
  --ck-warn:        var(--sc-warning);
  --ck-stripe:      var(--sc-bone);
  --ck-mono:        var(--sc-mono);
  --ck-sans:        var(--sc-sans);

  /* v3 marketing tokens → editorial (so marketing_page.py + chartis
   * shell share the same palette and the bridge from / to /home is
   * visually continuous instead of a regression).
   * --teal-deep in marketing maps to our editorial teal-ink. */
  --bg:             var(--sc-parchment);
  --bg-alt:         var(--sc-bone);
  --paper:          #ffffff;
  --paper-pure:     #ffffff;
  --border:         var(--sc-rule);
  --border-strong:  var(--sc-rule-2);
  --rule:           var(--sc-rule);
  --ink:            var(--sc-ink);
  --ink-2:          var(--sc-navy);
  --muted:          var(--sc-text-dim);
  --faint:          var(--sc-text-faint);
  --teal:           var(--sc-teal);
  --teal-soft:      #d4e4e2;
  --teal-deep:      var(--sc-teal-ink);
  --green:          var(--sc-positive);
  --green-text:     var(--sc-positive);
  --green-soft:     #dce6d9;
  --amber:          var(--sc-warning);
  --amber-soft:     #efe2bc;
  --red:            var(--sc-negative);
  --red-soft:       #ebd3cd;
  --blue:           #2c5c84;
  --blue-soft:      #d6e1eb;
  --link:           var(--sc-teal-ink);
  --accent:         var(--sc-teal);
  --accent-soft:    #d4e4e2;
  --card:           #ffffff;

  /* ── 2026-05-28 style-sweep tokens ─────────────────────────────
   * Editorial redesign spec tokens. These are NEW (not aliases of
   * existing values) — kept distinct so adding them doesn't
   * silently recolor pages still on --sc-parchment. Pages opting
   * into the new editorial shape (portfolio_overview, regression
   * editorial top, sweep batches) reference these directly. Spec
   * source of truth: docs/style-sweep/STYLE_SWEEP_PROMPT.md. */
  --paper-2:        #ebe5d4;     /* alt panel / table stripe */
  --paper-3:        #e2dcc8;     /* deep panel / divider blocks */
  --paper-hi:       #fbf6e8;     /* highlight / hovered row */
  --paper-card:     #fefcf3;     /* inset card (filter panels) */
  --ink-3:          #506478;     /* deeper muted */
  --ink-deep:       #0e1a29;     /* sidebar floor / nav bar */
  --muted-2:        #9a9e8a;     /* placeholder / dim mono */
  --rule-soft:      #ddd1ac;     /* sub-divider */
  --rule-hi:        #b6a87f;     /* hover / emphasized rule */
  --green-2:        #2d8964;     /* lighter primary */
  --green-deep:     #154e36;     /* darker primary / eyebrow */
  --green-tint:     #e6efe1;     /* subtle tint */
  --coral:          #b04a3a;     /* negative / destructive */
  --coral-soft:     #ecd4cc;
  --amber-soft:     #ecdfb4;
  --gold:           #a08227;     /* scores, accent numerals */
}

/* Reset / base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: var(--sc-sans);
  color: var(--sc-text);
  background: var(--sc-parchment);
  font-size: 15px;
  /* 2026 breathing-room pass: 1.55 → 1.62 so dense body copy reads less
   * cramped (paired with the looser spacing scale above). */
  line-height: 1.62;
  text-wrap: pretty;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Typography scale */
.sc-eyebrow {
  font-family: var(--sc-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sc-text-dim);
  position: relative;
  padding-left: 36px;
}
.sc-eyebrow::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 24px; height: 2px;
  background: var(--sc-teal);
  transform: translateY(-50%);
}
.sc-eyebrow.on-navy { color: var(--sc-on-navy-dim); }

.sc-display {
  font-family: var(--sc-serif);
  font-weight: 400;
  font-size: clamp(44px, 5.6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--sc-navy);
}
.sc-display.on-navy { color: var(--sc-on-navy); }

.sc-h1 {
  font-family: var(--sc-serif);
  font-weight: 400;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--sc-navy);
}
.sc-h2 {
  font-family: var(--sc-serif);
  font-weight: 400;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.2;
  color: var(--sc-navy);
}
.sc-h3 {
  font-family: var(--sc-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: 0.005em;
  color: var(--sc-navy);
}
.sc-lead {
  font-family: var(--sc-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--sc-text-dim);
  max-width: 58ch;
}
.sc-body { font-size: 15px; line-height: 1.6; color: var(--sc-text); }
.sc-meta {
  font-family: var(--sc-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--sc-text-faint);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.sc-num {
  font-family: var(--sc-mono);
  font-variant-numeric: tabular-nums;
}

/* Buttons */
.sc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: var(--sc-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: var(--sc-r-1);
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.sc-btn .arrow { width: 12px; height: 12px; }
.sc-btn-primary {
  background: var(--sc-navy);
  color: var(--sc-on-navy);
  border-color: var(--sc-navy);
}
.sc-btn-primary:hover { background: var(--sc-navy-2); border-color: var(--sc-navy-2); }
.sc-btn-outline-light {
  color: var(--sc-on-navy);
  border-color: var(--sc-on-navy);
}
.sc-btn-outline-light:hover { background: var(--sc-on-navy); color: var(--sc-navy); }
.sc-btn-outline-dark {
  color: var(--sc-navy);
  border-color: var(--sc-navy);
}
.sc-btn-outline-dark:hover { background: var(--sc-navy); color: var(--sc-on-navy); }
.sc-btn-ghost {
  padding: 8px 0;
  border: 0;
  color: var(--sc-teal-ink);
  border-bottom: 1px solid var(--sc-teal);
  border-radius: 0;
  letter-spacing: 0.12em;
}
.sc-btn-ghost:hover { color: var(--sc-navy); border-bottom-color: var(--sc-navy); }

/* Decorative teal corner brackets for hero imagery */
.sc-frame { position: relative; }
.sc-frame::before, .sc-frame::after {
  content: '';
  position: absolute;
  width: 72px; height: 72px;
  border: 2px solid var(--sc-teal);
}
.sc-frame::before {
  top: -16px; right: -16px;
  border-right: none; border-bottom: none;
  transform: scaleX(-1);
}
.sc-frame::after {
  bottom: -16px; left: -16px;
  border-left: none; border-top: none;
  transform: scaleX(-1);
}

/* Utility */
.sc-rule { height: 1px; background: var(--sc-rule); border: 0; }
.sc-rule-navy { height: 1px; background: var(--sc-navy-3); border: 0; }
.sc-container { width: min(1280px, 100% - 48px); margin-inline: auto; }
.sc-container-wide { width: min(1440px, 100% - 48px); margin-inline: auto; }