/* Parallel Path tokens.
   Live at https://parallelpath.studioparkside.co/_assets/css/pp-tokens.css.
   Every Parallel Path page links here first. A fork of the Studio Parkside
   system's tokens.css, carried over once. It does not link the Parkside
   system and Parkside changes are not pushed into it.

   Link order on a page: pp-tokens.css, pp.css, the page's own <style>
   block, then pp-print.css last so print wins. The root index links
   pp-tokens.css alone, the way a Parkside project index does.

   Edit this file to change color, type, or geometry on every page at
   once. Add, never rename or remove. */

/* ============================================================
   PARALLEL PATH TOKENS — START
   ============================================================ */
:root {
  color-scheme: light;

  /* ── Parallel Path brand. Four colors, named as in the identity. ── */
  --linen: #F6EDE6;
  --night: #151515;
  --slate: #233D4D;
  --lime: #C6EB4C;
  --neutral-white: #FFFFFF;   /* print only */
  --neutral-black: #000000;   /* print only */

  /* ── Light. Linen and Night only, no slate. Linen cards on a ground one
     shade under Linen. Night at reduced opacity does every job the
     template grays did, so each gray stays warm: secondary text, pending
     rows, pills, links, rules. Numbers and the control fill are Night.
     No lime on light. ── */
  --ground: color-mix(in srgb, var(--linen) 94%, var(--night));
  --card: var(--linen);
  --card-bright: color-mix(in srgb, var(--linen) 55%, var(--neutral-white));
  --ink: var(--night);
  --ink-soft: color-mix(in srgb, var(--night) 72%, transparent);
  --ink-pending: color-mix(in srgb, var(--night) 62%, transparent);
  --ink-contrast: var(--linen);          /* marks on an ink fill */
  --accent: var(--night);                /* rail numbers, pills, links, control */
  --accent-deep: var(--paper);           /* the accent's job on the deep card */
  --highlight: var(--night);             /* lime on dark: section and contents numbers, client pills, theme control */
  --deep: var(--night);                  /* hero and closing card */
  --paper: var(--linen);                 /* text on the deep card */
  --paper-soft: color-mix(in srgb, var(--linen) 60%, transparent);
  --outline: color-mix(in srgb, var(--night) 18%, transparent);
  --hairline: color-mix(in srgb, var(--night) 13%, transparent);
  --group-rule: color-mix(in srgb, var(--night) 45%, transparent);
  --hairline-light: color-mix(in srgb, var(--linen) 30%, transparent);
  --muted: color-mix(in srgb, var(--night) 35%, transparent);
  --glass: color-mix(in srgb, var(--ground) 62%, transparent);
  --glass-solid: color-mix(in srgb, var(--ground) 96%, transparent);
  --measure: 660px;
  --radius: 0;                           /* hard edges on every card, tile, and panel */
  --header-h: 96px;

  /* ── Type. IBM Plex, one superfamily, three registers. ──────────
     --headline  h1, section headlines, section numbers. Plex Sans.
     --subhead   labels, reference tiles, week headers. Plex Sans.
     --ui        pills, row numbers, contents, names, hero lede, footer.
     --lede      section and label intros, closing. Plex Serif, one
                 step up in size.
     --body      row copy and everything else read in sentences.

     Sans carries structure, serif carries anything Michael is saying.
     Both faces are on Google Fonts, so anyone at Parallel Path can
     install them and use them in Slides, Docs, and the Adobe apps.
  ──────────────────────────────────────────────────────────────── */
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "IBM Plex Serif", Charter, Georgia, "Times New Roman", serif;

  --headline: var(--sans);  --w-headline: 500;     --ls-headline: -0.022em;
  --subhead:  var(--sans);  --w-subhead: 400;      --ls-subhead: -0.008em;
  --ui:       var(--sans);  --w-headline-sub: 300;
  --lede:     var(--serif); --ls-lede: -0.004em;
  --body:     var(--serif); --body-bold: 600;
  --body-size: 17.5px; --body-lh: 1.62; --ls-body: -0.002em;
}

/* ── Dark. Night ground, Linen text. The accent is Linen, mirroring
   Night on light, so numbers, pills, and links stay warm. Lime lives
   only in --highlight: section numbers, contents numbers, the header
   and footer client pills, and the theme control, pulled a
   step toward Night so it reads as accent, not glow.
   Secondary text and rules are Linen at reduced opacity, a muted warm
   gray. The hero and closing cards go a warm dark gray, Night mixed
   84 percent toward Linen, so they still sit a step above the cards
   and two above the ground without pulling toward blue. Not Slate,
   which read as too bright and saturated behind the contents list.
   Pending rows dim by opacity, never lime. ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: var(--night);
    --card: color-mix(in srgb, var(--night) 95%, var(--linen));
    --card-bright: color-mix(in srgb, var(--night) 91%, var(--linen));
    --ink: var(--linen);
    --ink-soft: color-mix(in srgb, var(--linen) 66%, transparent);
    --ink-pending: color-mix(in srgb, var(--linen) 52%, transparent);
    --ink-contrast: var(--night);
    --accent: var(--linen);
    --accent-deep: var(--highlight);
    --highlight: color-mix(in srgb, var(--lime) 82%, var(--night));
    --deep: color-mix(in srgb, var(--night) 84%, var(--linen));
    --paper: var(--linen);
    --paper-soft: color-mix(in srgb, var(--linen) 60%, transparent);
    --outline: color-mix(in srgb, var(--linen) 16%, transparent);
    --hairline: color-mix(in srgb, var(--linen) 12%, transparent);
    --group-rule: color-mix(in srgb, var(--linen) 45%, transparent);
    --hairline-light: color-mix(in srgb, var(--linen) 30%, transparent);
    --muted: color-mix(in srgb, var(--linen) 35%, transparent);
    --glass: color-mix(in srgb, var(--night) 70%, transparent);
    --glass-solid: color-mix(in srgb, var(--night) 96%, transparent);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: var(--night);
  --card: color-mix(in srgb, var(--night) 95%, var(--linen));
  --card-bright: color-mix(in srgb, var(--night) 91%, var(--linen));
  --ink: var(--linen);
  --ink-soft: color-mix(in srgb, var(--linen) 66%, transparent);
  --ink-pending: color-mix(in srgb, var(--linen) 52%, transparent);
  --ink-contrast: var(--night);
  --accent: var(--linen);
  --accent-deep: var(--highlight);
  --highlight: color-mix(in srgb, var(--lime) 82%, var(--night));
  --deep: color-mix(in srgb, var(--night) 84%, var(--linen));
  --paper: var(--linen);
  --paper-soft: color-mix(in srgb, var(--linen) 60%, transparent);
  --outline: color-mix(in srgb, var(--linen) 16%, transparent);
  --hairline: color-mix(in srgb, var(--linen) 12%, transparent);
  --group-rule: color-mix(in srgb, var(--linen) 45%, transparent);
  --hairline-light: color-mix(in srgb, var(--linen) 30%, transparent);
  --muted: color-mix(in srgb, var(--linen) 35%, transparent);
  --glass: color-mix(in srgb, var(--night) 70%, transparent);
  --glass-solid: color-mix(in srgb, var(--night) 96%, transparent);
}

/* ── Geometry at phone width. The component breakpoint lives in pp.css;
   the token half lives here so a page that links the tokens alone still
   gets it. ── */
@media (max-width: 820px) {
  :root { --header-h: 68px; --measure: none; }
}

/* ============================================================
   PARALLEL PATH TOKENS — END
   ============================================================ */