/* PK2 AI Advisors · design tokens
   No hex value belongs anywhere outside this file. Every component reads a
   custom property from here, so re-skinning the site is an edit to this one
   sheet and nothing else.

   Same skeleton as pk2finstrat.com (type scale, spacing rhythm, pill geometry,
   mono utility face, section grammar). Different skin: gold accent, slate ink,
   Poppins wordmark, Fraunces plus DM Sans. */

:root {
  /* Ground ------------------------------------------------------------- */
  /* Cream paper, and a second cream one step deeper for banded sections. */
  --paper: #FAF8F3;
  --paper-2: #F2EFE6;
  /* The paper sheet itself: the core white a card lifts to on hover. */
  --sheet: #FFFFFF;

  /* Slate. This is both the dark-section ground and the heading ink, which
     is why the site never needs a second dark. 9.45:1 on paper. */
  --ink: #374354;
  /* One step deeper, for a panel nested inside a slate section. */
  --ink-2: #2E3947;

  /* Text ---------------------------------------------------------------- */
  /* Body copy is slate lifted slightly off the heading ink, so headings stay
     the darkest thing on the page. 8.45:1 on paper, 7.80:1 on paper-2. */
  --text: #3F4A5B;
  /* Muted body copy still clears AA at 4.89:1 on paper. */
  --text-muted: #616E80;
  /* Inverse pair, for the slate ground. 8.73:1 and 4.91:1 on slate. */
  --text-inv: #F2EFE6;
  --muted-inv: #AEB6C2;

  /* Accent -------------------------------------------------------------- */
  --gold: #CFB53B;
  --gold-hover: #B89F2E;

  /* Gold dark enough to be read as text on a light ground: 5.00:1 on paper,
     4.62:1 on paper-2. Full --gold measures 1.92:1 on paper and cannot carry
     text there at all. It is still the right gold on slate, where it reads
     4.93:1, and the right gold for a fill. */
  --gold-text: #7A6B22;

  /* Text sitting on a gold fill. Slate pushed deeper so the label survives
     the hover darkening too: 6.76:1 on --gold, 5.26:1 on --gold-hover. */
  --on-gold: #252E39;

  /* Rules and derived surfaces. Kept here so the no-hex-outside-tokens rule
     holds for every downstream sheet. */
  --hairline: rgba(55, 67, 84, 0.16);
  --hairline-inv: rgba(242, 239, 230, 0.18);
  --gold-soft: rgba(207, 181, 59, 0.16);
  /* --gold at 45%, the fallback for a color-mix() the older engines skip. */
  --gold-45: rgba(207, 181, 59, 0.45);
  --arrow-well: rgba(37, 46, 57, 0.12);

  /* The keyboard ring is the only indicator some people ever get, so it takes
     the dark gold on light grounds, full gold on slate, and deep slate where
     the element is itself gold. A gold ring on a gold fill reads as nothing. */
  --focus-ring: var(--gold-text);
  --focus-ring-ink: var(--gold);
  --focus-ring-inv: var(--on-gold);

  /* Type ----------------------------------------------------------------- */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Wordmark only. Nothing else on the site is set in Poppins. */
  --font-wordmark: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --size-display-xl: clamp(40px, 5.4vw, 76px);
  --size-display-lg: clamp(32px, 3.8vw, 52px);
  --size-h2: clamp(28px, 3vw, 40px);
  --size-h3: 26px;
  --size-h4: 19px;
  --size-body-lg: 20px;
  /* Lead-paragraph scale, with the column that keeps it to ~75 chars at 24px. */
  --size-body-lead: 24px;
  --measure-lead: 800px;
  /* Full-width standfirst scale. Sized down a step: at 30px the block shouted
     over the h1 above it and sat heavy on a phone. The trade is length. Across
     the full 1200px container this runs past the ~75-char reading measure, near
     105 at the 24px ceiling. That is the same fenced exception the About
     statement takes, and it stops with these two blocks: it is not licence to
     run running copy at full width anywhere else. */
  --size-standfirst: clamp(19px, 1.9vw, 24px);
  --size-body: 18px;
  --size-small: 15px;
  --size-label: 12px;
  --size-mono: 15px;
  --size-num-display: clamp(56px, 8vw, 120px);

  /* Layout ---------------------------------------------------------------- */
  --container: 1200px;
  --gutter: 24px;
  --margin-outer: 120px;
  --measure: 620px;

  /* The distance from the container edge to the viewport edge. Anything that
     has to run off the page adds this to its own width. */
  --edge-bleed: max(var(--margin-outer), calc((100vw - var(--container)) / 2));

  --section-top: 80px;
  --section-bottom: 88px;

  /* The section header's internal rhythm. An eyebrow is a label for the
     heading directly under it, so the two sit close enough to read as one
     unit. Nothing on the generic scale is small enough for that job, which
     is why components reached for --space-6 and left a hole. */
  --space-eyebrow: 14px;
  --space-heading: 28px;
  /* The first section on a page sits under the header, which already
     provides separation. Full --section-top on top of --header-height
     stacks two systems and makes every page open with a void. */
  --section-top-first: 40px;
  /* Short sections do not need the air that content-heavy ones do.
     Use on closing CTA sections and any section whose body is under
     roughly 60 words. */
  --section-top-compact: 56px;
  --section-bottom-compact: 64px;

  /* Header. One number, so the sticky offset and the scroll padding agree. */
  --header-height: 76px;

  /* Radii. Pills for buttons, square everywhere else. The week grid has no
     radius at all: it is ruled, not boxed. */
  --radius-pill: 999px;
  --radius-card: 0px;

  /* Component geometry. Held here so a component sheet declares no raw
     numbers of its own for the things that define the site's hand. */
  --btn-height: 52px;
  --btn-height-compact: 44px;
  --btn-pad-x: 26px;
  --btn-pad-arrow: 12px;
  --btn-gap: 14px;
  --btn-arrow-size: 28px;
  --btn-font: 16px;
  --nav-font: 15px;
  --nav-gap: 32px;
  --hair: 1px;
  --strike: 2px;
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 34px;
  --space-6: 48px;
  --space-7: 64px;

  /* Motion. One curve, used everywhere, so the site has a single hand. */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-ui: 220ms;
  --dur-draw: 340ms;
  --dur-resolve: 900ms;
  --dur-page: 520ms;
}

@media (max-width: 1024px) {
  :root {
    --margin-outer: 60px;
    --section-top: 64px;
    --section-bottom: 72px;
    /* The eyebrow and heading gaps do not step down: the pair reads as one
       unit at every width, and 14px is already the smallest useful gap. */
    --section-top-first: 32px;
    --section-top-compact: 44px;
    --section-bottom-compact: 52px;
  }
}

@media (max-width: 640px) {
  :root {
    --margin-outer: 22px;
    --section-top: 48px;
    --section-bottom: 56px;
    --section-top-first: 24px;
    --section-top-compact: 32px;
    --section-bottom-compact: 40px;
    --size-body: 17px;
    --size-body-lead: 20px;
    --size-mono: 14px;
    --header-height: 68px;
  }
}