/* ==========================================================================
   pp-tokens.css — shared design tokens
   ==========================================================================

   ONE source, consumed by both:
     - the WordPress theme (pivotalpath.com)
     - Vision's prerenderer (index pages, methodology, answer pages)

   ONE COPY, ONE HOME. This file is HOSTED by Vision and linked -- as an
   absolute URL -- by both systems, so a change lands everywhere at once. It
   must never be duplicated: a second copy is a fork that stops tracking the
   other side the moment either changes, which defeats the whole purpose.

   The home is the working tree you are reading it in:
   vision/public/assets/pp-tokens.css, served at

     <link rel="stylesheet" href="https://apps2.pivotalpath.com/assets/pp-tokens.css">

   The WordPress theme links that same absolute URL. When pivotalpath.com and
   Vision are consolidated the URL becomes www.pivotalpath.com/assets/
   pp-tokens.css -- SAME PATH, so only the host changes and nothing else moves.

   The seam between systems sits at LOGIN, not at the platform boundary.
   A visitor moving from /about/ to /hedge-fund-index/composite must see no
   change in typography, spacing, colour, header or navigation.

   Rules:
     - Public pages use these tokens only. No local colour or type values.
     - Application UI (behind login) may extend, never redefine.
     - Add a token rather than hardcoding a value in one system.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Type
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  --pp-font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --pp-font-body: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Scale. Fluid where a heading must hold at both ends. */
  --pp-size-hero:      clamp(40px, 6.2vw, 72px);
  --pp-size-page:      clamp(36px, 5.4vw, 60px);
  --pp-size-section:   clamp(29px, 4vw, 42px);
  --pp-size-sub:       27px;
  --pp-size-lede:      19px;
  --pp-size-body:      16.5px;
  --pp-size-ui:        15px;
  --pp-size-small:     14px;
  --pp-size-caption:   12.5px;
  --pp-size-label:     12px;

  --pp-lh-tight:  1.05;
  --pp-lh-head:   1.12;
  --pp-lh-body:   1.55;
  --pp-lh-lede:   1.5;

  --pp-track-display: -0.02em;   /* display type needs negative tracking */
  --pp-track-label:    0.09em;   /* uppercase labels need positive */
}

/* --------------------------------------------------------------------------
   2 · Colour

   Ink and paper, with a single accent. Status colours carry meaning and are
   never used decoratively — if something is oxide red it is wrong, if it is
   olive it is restricted.
   -------------------------------------------------------------------------- */
:root {
  --pp-ink:        #14181F;   /* primary text */
  --pp-ink-2:      #3D454F;   /* body copy */
  --pp-ink-3:      #6B747F;   /* labels, captions, de-emphasis */

  --pp-ground:     #FFFFFF;
  --pp-wash:       #F5F4F0;   /* alternating sections */
  --pp-rule:       #DCDAD3;   /* structural rules */
  --pp-rule-fine:  #E9E7E1;   /* within-component rules */

  --pp-accent:     #1F6F5C;   /* links, emphasis, active state */
  --pp-theme-color:#243a60;   /* <meta name="theme-color"> — matches Vision */

  --pp-brand:      #243a60;   /* PivotalPath navy. Already in use on Vision
                                 as theme-color — do not diverge from it. */
  --pp-panel:      #243a60;   /* dark panel background = brand navy */
  --pp-panel-ink:  #F2F1EC;   /* text on dark */
  --pp-panel-rule: #3A4E75;
  --pp-panel-mute: #9DAAC4;
  --pp-panel-border:#48597E;  /* ghost button on dark */

  --pp-negative:   #A33520;   /* negative figures, errors, blocking states */
  --pp-negative-bg:#F6E9E6;
  --pp-caution:    #6E5F2B;   /* restricted, needs attention */
  --pp-caution-bg: #F2EFE3;
  --pp-focus:      #2B5C8A;
}

/* --------------------------------------------------------------------------
   3 · Space and measure
   -------------------------------------------------------------------------- */
:root {
  --pp-wrap:        1240px;   /* corporate pages */
  --pp-wrap-read:    940px;   /* document pages — index, methodology, answers */
  --pp-gutter:        32px;

  --pp-space-1:  4px;
  --pp-space-2:  8px;
  --pp-space-3:  14px;
  --pp-space-4:  22px;
  --pp-space-5:  34px;
  --pp-space-6:  52px;
  --pp-space-7:  88px;

  --pp-measure:      68ch;    /* body copy */
  --pp-measure-lede: 60ch;
  --pp-measure-head: 22ch;

  --pp-header-h:     72px;
  --pp-border:       1px;
  --pp-border-heavy: 2px;
  --pp-radius:       0;       /* deliberate: nothing is rounded */
}

/* --------------------------------------------------------------------------
   4 · Base

   Applied by both systems. WordPress themes will need these scoped or
   !important-free overrides checked against the active theme.
   -------------------------------------------------------------------------- */
.pp, body.pp {
  font-family: var(--pp-font-body);
  font-size: var(--pp-size-body);
  line-height: var(--pp-lh-body);
  color: var(--pp-ink);
  background: var(--pp-ground);
  -webkit-font-smoothing: antialiased;
}

.pp-wrap      { max-width: var(--pp-wrap);      margin-inline: auto; padding-inline: var(--pp-gutter); }
.pp-wrap-read { max-width: var(--pp-wrap-read); margin-inline: auto; padding-inline: var(--pp-gutter); }

/* Figures. Tabular numerals so columns align and digits are comparable. */
.pp-num { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* --------------------------------------------------------------------------
   5 · Headings
   -------------------------------------------------------------------------- */
.pp-h-hero, .pp-h-page, .pp-h-section, .pp-h-sub {
  font-family: var(--pp-font-display);
  font-weight: 400;
  letter-spacing: var(--pp-track-display);
  margin: 0 0 var(--pp-space-4);
}
.pp-h-hero    { font-size: var(--pp-size-hero);    line-height: var(--pp-lh-tight); max-width: var(--pp-measure-head); }
.pp-h-page    { font-size: var(--pp-size-page);    line-height: var(--pp-lh-tight); max-width: var(--pp-measure-head); }
.pp-h-section { font-size: var(--pp-size-section); line-height: var(--pp-lh-head); }
.pp-h-sub     { font-size: var(--pp-size-sub);     line-height: var(--pp-lh-head); }

.pp-eyebrow {
  font-size: var(--pp-size-caption);
  font-weight: 600;
  letter-spacing: var(--pp-track-label);
  text-transform: uppercase;
  color: var(--pp-accent);
  margin: 0 0 var(--pp-space-4);
}

.pp-lede {
  font-size: var(--pp-size-lede);
  line-height: var(--pp-lh-lede);
  color: var(--pp-ink-2);
  max-width: var(--pp-measure-lede);
  margin: 0 0 var(--pp-space-6);
}

.pp-body { font-size: var(--pp-size-body); color: var(--pp-ink-2); max-width: var(--pp-measure); margin: 0 0 var(--pp-space-3); }

/* --------------------------------------------------------------------------
   6 · Header and footer

   These must be markup-identical across systems. If the nav changes in one,
   it changes in both — that is the strongest single signal of "same site".
   -------------------------------------------------------------------------- */
.pp-header {
  border-bottom: var(--pp-border) solid var(--pp-rule);
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
}
.pp-header-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--pp-space-5);
  height: var(--pp-header-h);
  max-width: var(--pp-wrap); margin-inline: auto; padding-inline: var(--pp-gutter);
}
.pp-logo { font-family: var(--pp-font-display); font-size: 26px; letter-spacing: -0.01em; text-decoration: none; color: var(--pp-ink); }
.pp-nav { display: flex; gap: 30px; font-size: 14.5px; font-weight: 500; }
.pp-nav a { color: var(--pp-ink-2); text-decoration: none; }
.pp-nav a:hover { color: var(--pp-ink); }
.pp-nav a[aria-current="page"] { color: var(--pp-ink); }

.pp-footer { padding: var(--pp-space-6) 0 var(--pp-space-5); font-size: var(--pp-size-small); }
.pp-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--pp-space-5); padding-bottom: var(--pp-space-5); border-bottom: var(--pp-border) solid var(--pp-rule); }
.pp-footer h4 { font-size: var(--pp-size-label); font-weight: 700; letter-spacing: var(--pp-track-label); text-transform: uppercase; color: var(--pp-ink-3); margin: 0 0 var(--pp-space-3); }
.pp-footer a { display: block; color: var(--pp-ink-2); text-decoration: none; padding: 5px 0; }
.pp-footer a:hover { color: var(--pp-ink); }

/* --------------------------------------------------------------------------
   7 · Actions
   -------------------------------------------------------------------------- */
.pp-cta {
  display: inline-block; white-space: nowrap; cursor: pointer;
  font: inherit; font-size: var(--pp-size-small); font-weight: 600;
  padding: 10px 20px;
  border: var(--pp-border) solid var(--pp-ink);
  background: var(--pp-ink); color: #fff; text-decoration: none;
  border-radius: var(--pp-radius);
}
.pp-cta:hover { opacity: .85; }
.pp-cta--ghost { background: none; color: var(--pp-ink); }
.pp-cta:focus-visible { outline: 2px solid var(--pp-focus); outline-offset: 2px; }

.pp-link {
  font-weight: 600; text-decoration: none;
  border-bottom: var(--pp-border-heavy) solid var(--pp-accent);
  padding-bottom: 2px; cursor: pointer;
}

/* --------------------------------------------------------------------------
   8 · Data display

   Figures are the product. These are used identically on corporate pages and
   on generated index pages.
   -------------------------------------------------------------------------- */
.pp-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.pp-fig  { padding-inline: 26px; border-left: var(--pp-border) solid var(--pp-panel-rule); }
.pp-fig:first-child { padding-left: 0; border-left: 0; }
.pp-fig-v { font-size: 33px; font-weight: 600; line-height: var(--pp-lh-tight); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.pp-fig-k { font-size: var(--pp-size-caption); color: var(--pp-panel-mute); margin-top: 7px; line-height: 1.35; }

.pp-panel { background: var(--pp-panel); color: var(--pp-panel-ink); }

.pp-table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: var(--pp-space-4) 0 var(--pp-space-3); }
.pp-table th, .pp-table td { text-align: right; padding: 10px 8px; border-bottom: var(--pp-border) solid var(--pp-rule-fine); white-space: nowrap; }
.pp-table th:first-child, .pp-table td:first-child { text-align: left; white-space: normal; }
.pp-table th { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pp-ink-3); border-bottom: var(--pp-border) solid var(--pp-rule); }
.pp-table caption { caption-side: bottom; text-align: left; font-size: var(--pp-size-caption); color: var(--pp-ink-3); padding-top: 10px; line-height: 1.45; }
.pp-table tr.pp-hl td { background: var(--pp-wash); font-weight: 600; }
.pp-table td.pp-neg { color: var(--pp-negative); }

.pp-note {
  font-size: var(--pp-size-small); color: var(--pp-ink-3);
  border-left: var(--pp-border-heavy) solid var(--pp-rule);
  padding-left: var(--pp-space-3); margin: var(--pp-space-4) 0;
  max-width: 64ch;
}

/* Attribution block closing every generated page. */
.pp-source {
  margin-top: var(--pp-space-6); padding-top: var(--pp-space-4);
  border-top: var(--pp-border) solid var(--pp-rule);
  font-size: 13.5px; color: var(--pp-ink-3); max-width: 70ch;
}


/* --------------------------------------------------------------------------
   8b · Additions requested by the prerenderer
   -------------------------------------------------------------------------- */

/* Table overflow. .pp-table sets nowrap, so a wide reference table must scroll
   within its own container rather than dragging the page sideways on a phone. */
.pp-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--pp-space-4) 0 var(--pp-space-3); }
.pp-tablewrap > .pp-table { margin: 0; }

/* Display equations. Monospace is justified here: alignment and character
   distinction carry meaning in a formula. */
.pp-eq {
  font-family: ui-monospace, "SFMono-Regular", "IBM Plex Mono", Menlo, monospace;
  font-size: 14px; line-height: 1.7;
  background: var(--pp-wash);
  border-left: var(--pp-border-heavy) solid var(--pp-rule);
  padding: var(--pp-space-3) var(--pp-space-4);
  margin: var(--pp-space-3) 0 var(--pp-space-4);
  overflow-x: auto; white-space: pre;
}
.pp-eq-n { float: right; color: var(--pp-ink-3); font-size: 13px; }

/* Definition lists — Issue/Solution pairs in the methodology. */
.pp-dl { margin: 0 0 var(--pp-space-4); border-left: var(--pp-border-heavy) solid var(--pp-rule); padding-left: var(--pp-space-4); max-width: var(--pp-measure); }
.pp-dl dt { font-weight: 600; font-size: 15.5px; margin-top: var(--pp-space-3); color: var(--pp-ink); }
.pp-dl dt:first-child { margin-top: 0; }
.pp-dl dd { margin: var(--pp-space-1) 0 0; font-size: 15.5px; color: var(--pp-ink-2); }

/* Body lists, outside boxes. */
.pp-list { margin: 0 0 var(--pp-space-3); padding-left: var(--pp-space-4); max-width: var(--pp-measure); }
.pp-list li { font-size: var(--pp-size-body); color: var(--pp-ink-2); margin-bottom: var(--pp-space-2); line-height: var(--pp-lh-body); }
.pp-list li::marker { color: var(--pp-ink-3); }
.pp-list--tight li { margin-bottom: var(--pp-space-1); }

/* Negative figures. Meaning, never decoration. */
.pp-neg { color: var(--pp-negative); }

/* --------------------------------------------------------------------------
   9 · Sections and boxes
   -------------------------------------------------------------------------- */
.pp-section       { padding-block: var(--pp-space-7); }
.pp-section--wash { background: var(--pp-wash); }
.pp-section--tight{ padding-block: var(--pp-space-6); }

.pp-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pp-border); background: var(--pp-rule); border: var(--pp-border) solid var(--pp-rule); }
.pp-boxes--2 { grid-template-columns: repeat(2, 1fr); }
.pp-box { background: var(--pp-ground); padding: var(--pp-space-5) 30px 30px; display: flex; flex-direction: column; }
.pp-section--wash .pp-box { background: var(--pp-wash); }
.pp-box ul { margin: 0 0 var(--pp-space-4); padding: 0; list-style: none; flex: 1; }
.pp-box li { font-size: var(--pp-size-ui); color: var(--pp-ink-2); padding: 9px 0; border-top: var(--pp-border) solid var(--pp-rule-fine); line-height: 1.4; }
.pp-box li:first-child { border-top: 0; padding-top: 0; }

/* --------------------------------------------------------------------------
   10 · Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .pp-boxes, .pp-boxes--2 { grid-template-columns: 1fr; }
  .pp-footer-grid { grid-template-columns: 1fr 1fr; }
  .pp-nav { display: none; }
  .pp-fig { padding-left: 0; border-left: 0; border-top: var(--pp-border) solid var(--pp-panel-rule); padding-top: 17px; margin-top: 17px; }
  .pp-fig:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
}
@media (max-width: 720px) {
  .pp-table { font-size: 13px; }
  .pp-table th, .pp-table td { padding: 8px 5px; }
}

/* --------------------------------------------------------------------------
   11 · Ownership

   Owner: [UNASSIGNED — see O6]

   Served from: https://apps2.pivotalpath.com/assets/pp-tokens.css
                (Vision hosts it: vision/public/assets/pp-tokens.css; Caddy
                rewrites the host-root /assets/pp-tokens.css to the container
                copy under /vision/. See ops/caddy-root-seo.snippet.)
                The WordPress theme links this absolute URL.

   Changing a value here changes both properties. Any change should be checked
   against a corporate page and a generated index page side by side before it
   ships.
   -------------------------------------------------------------------------- */