/* Top Producer Investment Capital
   Design tokens. Palette sampled from the 2019-2026 WordPress site so the
   rebuild keeps the existing identity: gold on near-black, steel blue bands,
   warm paper. Gold and type scale per the tpic-brand skill. */

:root {
  /* ---- brand ---- */
  --gold:            #C8991A;
  --gold-bright:     #E0AE28;   /* gold on dark surfaces, lifts off near-black */
  --gold-deep:       #9E7813;   /* gold on paper, for text that must stay legible */
  --gold-wash:       #F8F1DE;   /* pale gold tint, sampled from the old site */

  --ink:             #16150F;   /* near-black, hero and footer ground */
  --ink-soft:        #24231C;
  --steel:           #315B7B;   /* the old site's band blue, sampled */
  /* The second ground. --steel taken down until it is a surface rather than a
     colour: cool enough to read as a change of room beside --ink's warm black,
     dark enough that --on-dark sits on it at 15:1. Added 2026-09-17 when the
     homepage went dark end to end. */
  --navy:            #0F1A23;
  --steel-deep:      #24455E;
  --steel-wash:      #EFF2F7;

  --paper:           #F8F7F3;   /* warm off-white, sampled from /investor */
  --paper-lift:      #FFFFFF;

  --text:            #22211C;
  --text-soft:       #55524A;
  --text-faint:      #86827A;
  --on-dark:         #F2EFE8;
  --on-dark-soft:    #A8A399;
  /* Body copy on --navy. --on-dark-soft is a warm grey, correct against
     --ink's warm black and slightly muddy against the cool navy. Added
     2026-09-18 with the questions page's steel room. */
  --on-navy-soft:    #B6C2CD;

  --rule:            #E2DED4;
  --rule-dark:       #35332B;

  /* ---- type ---- */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Reverted 2026-09-18, same day it was raised. Raising it was my call, not
     Ryan's: --t-h2 had just been applied for the first time and the hero h1
     was suddenly smaller than the section headings, so I pushed it up to
     41px. That broke the thing Ryan actually cares about here, which is the
     headline sitting on two lines above the fold with the film beside it.
     He looked at both and chose the two lines. So the hero h1 is deliberately
     smaller than a section h2 on some widths, and that is the trade he made
     knowingly; do not "fix" it again. */
  --t-hero:   clamp(1.95rem, 2.5vw, 2.55rem);
  --t-h1:     clamp(2.1rem, 4.6vw, 3.3rem);
  /* Retuned 2026-09-18, and it is the old value times 1.2 across the whole
     range rather than a new guess: 30px at 390, 37px at 1024, 44px at
     1440. That multiplier is where .section--plate h2 already was, and
     'How Does Investing Work?' is the section heading Ryan pointed at as
     correctly sized. So this does not invent a size, it gives every
     section the one that was already working on one of them. */
  --t-h2:     clamp(1.9rem, 3.6vw, 2.75rem);
  --t-h3:     clamp(1.2rem, 2vw, 1.5rem);
  --t-lead:   clamp(1.05rem, 1.5vw, 1.3rem);
  --t-body:   1.0625rem;
  --t-small:  0.9375rem;
  --t-eyebrow: 0.78rem;

  /* ---- space ---- */
  --masthead-h: 74px;
  --gutter: 1.5rem;
  --measure: 66ch;
  --wide: 1180px;
  --wide-hero: 1740px;
  --narrow: 760px;

  --s-section: clamp(3.5rem, 7vw, 6.5rem);

  /* Gold corner wash. One declaration, used by both the answer pills and the
     photographic plate they sit on, so "the same gradient" stays the same
     gradient instead of two values that drift apart. Deliberately reaches gold
     only in the last fifth: transparent across most of the box, so it reads as
     a lit corner rather than a tint. */
  --gold-corner: linear-gradient(to top right,
                   rgba(200, 153, 26, 0) 72%,
                   rgba(200, 153, 26, .045) 88%,
                   rgba(224, 174, 40, .11) 100%);

  /* ---- other ---- */
  --radius: 14px;      /* media, cards, inputs. Matches the reference hero's video corner. */
  --radius-sm: 8px;
  --radius-pill: 999px;  /* every button. No rectangular corners on a CTA. */
  --shadow: 0 1px 2px rgba(22,21,15,.05), 0 8px 24px rgba(22,21,15,.07);
  --shadow-lift: 0 2px 4px rgba(22,21,15,.06), 0 18px 44px rgba(22,21,15,.12);
}