/* 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;
  --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;

  /* 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;
  }
}

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