/* PK2 Finance & Strategy · design tokens (v2)
   The single source of colour. No hex value belongs anywhere else in the
   stylesheet layer; everything downstream reads a custom property from here. */

:root {
  --paper: #FAF7F0; --paper-2: #F2EEE3; --ink: #171C26; --ink-2: #202736;
  --text: #232936; --text-muted: #6D6A60; --fog: #8E897E; --text-inv: #EDEAE2;
  --muted-inv: #9BA1AE; --fog-inv: #798496;
  --gold: #C29A2B; --gold-hover: #A98420; --live: #3E9B6B;

  /* Gold, dark enough to be the only indicator on a light ground: 5.04:1 on
     paper, 4.66:1 on the second ground, 5.39:1 on the instrument core. Full
     --gold measures 2.47:1 on paper and cannot carry that job alone. It is
     still the right gold on ink, where it reads 6.46:1. */
  --gold-text: #81671D;

  /* The one failure colour. 5.72:1 on paper, 5.28:1 on the second ground. */
  --error: #A04545;
  --hairline: rgba(23,28,38,0.14); --hairline-inv: rgba(237,234,226,0.16);
  --grid-line: rgba(23,28,38,0.05); --grid-cross: rgba(23,28,38,0.14);
  --shadow-instr: 0 24px 48px -24px rgba(23,28,38,0.18);

  /* Instrument card inner core. Off-white, never pure #FFF: the card should
     read as a lit dial against paper, not as a hole punched in it. */
  --instr-core: #FFFFFC;

  /* Derived surfaces. Kept here so the no-hex-outside-tokens rule holds. */
  --gold-soft: rgba(194,154,43,0.10);
  --arrow-well: rgba(23,28,38,0.10);
  /* The keyboard ring is the only indicator some people ever get, so it takes
     the dark gold on light grounds, full gold on ink, and ink on a gold fill. */
  --focus-ring: var(--gold-text);
  --focus-ring-ink: var(--gold);
  --focus-ring-inv: var(--ink);

  /* Type ---------------------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Satoshi", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --size-display-xl: clamp(44px, 5.4vw, 76px);
  --size-display-lg: clamp(34px, 3.8vw, 52px);
  --size-h2: clamp(30px, 3vw, 40px);
  --size-h3: 26px;
  --size-h4: 19px;
  --size-quote: clamp(22px, 2vw, 28px);
  --size-body-lg: 20px;
  --size-body: 18px;
  --size-small: 15px;
  --size-label: 12px;
  --size-num-display: clamp(64px, 8vw, 120px);

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

  /* The distance from the container's edge to the viewport's 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: 120px;
  --section-bottom: 140px;

  /* Radii. Pills for buttons, 16/12 for instrument cards, square elsewhere. */
  --radius-pill: 999px;
  --radius-instr: 16px;
  --radius-instr-inner: 12px;

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

@media (max-width: 1024px) {
  :root {
    --margin-outer: 60px;
    --section-top: 96px;
    --section-bottom: 112px;
  }
}

@media (max-width: 640px) {
  :root {
    --margin-outer: 22px;
    --section-top: 72px;
    --section-bottom: 84px;
    --size-body: 17px;
  }
}