/**
 * Vanshap Capital — design tokens.
 *
 * THE SINGLE SOURCE OF TRUTH for colour, type, space and rules.
 * Nothing anywhere else in this theme may hardcode a hex value or a raw size.
 *
 * Ported from the Claude Design export (Vanshap Website v2), which in turn
 * derives from Brand & Presentation Style Guide v1.0 (Aug 2026), the July 2026
 * investor deck and the June 2026 monthly report.
 *
 * The deck-native slide tokens (--canvas-w, --slide-margin) are deliberately
 * NOT carried over — they describe a 16:9 slide, not a web page. Their web
 * equivalents are --wrap and --gutter-page below.
 */

:root {

	/* ── Base palette ───────────────────────────────────────────────────── */
	--vanshap-navy: #0B428B;  /* Titles on white, table headers, key serif figures. */
	--ocean:        #0E58B9;  /* Full-bleed grounds, serif subheads on white. */
	--ocean-panel:  #2A6EC7;  /* Card fill on ocean grounds. */
	--signal-blue:  #5297F2;  /* Accent only. Italic display words, rules under titles. */
	--sky:          #8BBAF6;  /* Labels on ocean/navy, tinted photo overlays. */
	--mist:         #E3EDF5;  /* Hairline rules, table banding. */
	--panel:        #F1F6FA;  /* Stat-card / sidebar panel fill on white. */
	--paper:        #FFFFFF;  /* Default ground. Never a gradient. */
	--ink:          #3A4046;  /* Long-form body on white. Not pure black. */
	--slate:        #5A5D61;  /* The one lighter grey left. NOT secondary text any
	                             more — see --text-disabled below. */
	--chart-gray:   #77787A;  /* The gray chart series. A line, not text — 3:1 is the
	                             bar it has to clear, so it keeps the old value that
	                             was too light to read at 10.5px. */
	--graphite:     #4A4E52;  /* Tracked-caps labels. See --text-label below. */

	/* The one functional colour the brand palette does not contain. A form that
	   marks a failed field in Ink or Slate is telling the reader nothing they can
	   see, and there is no red anywhere in the style guide to borrow. So this is
	   deliberately NOT a brand colour and must never be used as one: it appears
	   only where something is wrong and the reader has to act. 5.9:1 on Paper, so
	   it clears AA at the 14px an inline validation message sets at. */
	--signal-error: #B3261E;

	/* ── Semantic aliases ───────────────────────────────────────────────── */
	--text-display:         var(--vanshap-navy);
	--text-subhead:         var(--ocean);      /* subheads are SERIF in Ocean on white */
	--text-body:            var(--ink);
	/* ⚠️ --text-muted and --text-label are the SAME COLOUR, deliberately, as of
	   20 Sep 2026. The site has one grey for text and this is it; Daniel asked
	   for that directly, and the codebase was already drifting there one rule at
	   a time — several files still carry comments reasoning about "--text-label,
	   not --text-muted" on contrast grounds. That argument is finished: the two
	   names now differ only in ROLE, not in value. --text-muted is secondary body
	   text (meta lines, counts, notices); --text-label is a tracked-caps label.
	   Keep using whichever describes the text, and do not "simplify" one away —
	   the roles are what tells the next person which is which if they ever need
	   to diverge again.

	   Slate, the grey this used to be, was 6.6:1 and read as washed out at the
	   Light weight the body sets in. Graphite is 8.4:1. */
	--text-muted:           var(--graphite);

	/* The ONLY thing still set in the lighter grey, and only because these two
	   must NOT look like text you are meant to read: an input's placeholder,
	   which has to stay distinguishable from an answer somebody typed, and a
	   calendar date that cannot be booked. Darkening either one makes an empty
	   field look filled and an unavailable day look available. Anything else
	   reaching for this token is almost certainly reaching for --text-muted. */
	--text-disabled:        var(--slate);
	--text-error:           var(--signal-error);

	/* The eyebrow sets at 10.5px under 0.24em of tracking at weight 400, and
	   Chart Gray gave it 4.4:1 on white — under AA. Graphite took it to 7.2:1 and
	   that still read as faint, because the page sets body copy in Light and a
	   10.5px Light face is thin whatever its colour. So the label is 8.4:1 now
	   AND sets in Regular; the pairing is what makes it legible, and neither
	   half should be undone on its own. Still a grey, so it stays subordinate
	   to the Navy title above it. Every tracked-caps label on white uses it —
	   and so, since 20 Sep 2026, does --text-muted; see the note above it.

	   ⚠️ Both figures above are historical and name colours that have since
	   moved. The 4.4:1 was --chart-gray (#77787A), not --slate, which is 6.6:1
	   today; and the 7.2:1 Graphite has since been darkened to the 8.4:1 this
	   token now holds. Corrected 20 Sep 2026 after an audit re-derived the rule
	   from the wrong premise and went looking for a contrast failure in Slate
	   that was never there. The rule the paragraph argues for is unchanged. */
	--text-label:           var(--graphite);
	--text-on-ocean:        var(--paper);
	/* ⚠️ --mist, not --sky. The eyebrow sets at --size-eyebrow 0.65625rem =
	   10.5px at --weight-regular, which is normal-size text, so the bar is AA's
	   4.5:1 and not the 3:1 large-text allowance. --sky #8BBAF6 on --ocean is
	   3.36:1; --mist #E3EDF5 is 5.68:1 and keeps the tinted-label intent that
	   full white would lose. */
	--text-label-on-ocean:  var(--mist);
	/* ⚠️ Named --accent-mark, not --accent, and the suffix is load-bearing.
	   GeneratePress declares `:root { --accent: #1e73be }` in the inline
	   stylesheet it prints AFTER this file, so a token called --accent here
	   resolved to GP's blue everywhere it was used and this line did nothing.
	   It was the only one of the 93 tokens in this file that collided, found
	   20 Sep 2026 while the asterisk on the login form refused to take Signal
	   Blue. Renaming is the fix rather than reordering the enqueue, because a
	   name nobody else declares cannot be lost to load order again. */
	--accent-mark:          var(--signal-blue);
	--surface-page:         var(--paper);
	--surface-panel:        var(--panel);
	--surface-emphasis:     var(--ocean);
	--rule-hairline:        var(--mist);
	--rule-accent:          var(--signal-blue);

	/* Photographic treatment — every photo is grayscale under an Ocean wash. */
	--photo-filter:  grayscale(1);
	--photo-overlay: rgba(14, 88, 185, 0.5);

	/* The hero's wash, which is not the flat --photo-overlay: a flat Ocean tint,
	   then a navy gradient falling away to the right so the headline always has
	   ground under it regardless of the photograph.

	   These three lived as literals in sections.css until the maintenance page
	   needed the same hero. That page cannot load sections.css — its rules are
	   keyed to block-editor class names it has no reason to impersonate — so the
	   values are tokens now and both drawings read from one place. */
	--hero-wash:
		linear-gradient( rgba(14, 88, 185, 0.55), rgba(14, 88, 185, 0.55) ),
		linear-gradient( 105deg, rgba(11, 66, 139, 0.45) 0%, rgba(11, 66, 139, 0.12) 60%, rgba(11, 66, 139, 0) 100% );
	--hero-bracket:       rgba(255, 255, 255, 0.65);  /* the two corner brackets */
	--text-on-ocean-soft: rgba(255, 255, 255, 0.92);  /* standfirst over the wash */

	/* Chart series — fixed, from July 2026 deck legends. */
	--chart-sp500: var(--vanshap-navy);
	--chart-eafe:  var(--signal-blue);
	--chart-em:    var(--chart-gray);

	/* ── Type ───────────────────────────────────────────────────────────── */
	/* "Baskerville for judgment, Aptos for evidence." Baskerville (Apple) and
	   Aptos (Microsoft) cannot be licensed as webfonts, so the web system uses
	   Baskervville (SIL OFL) for display — which the design already carried as
	   its fallback — and an open humanist sans for text. See fonts.css. */
	--font-display: 'Baskervville', 'Times New Roman', Georgia, serif;
	--font-text:    'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;

	--weight-light:    300;  /* paragraphs */
	--weight-regular:  400;
	--weight-semibold: 600;  /* emphasis in text; never bold serif at display sizes */

	/* Role scale. Values are the design export's, verbatim — the export sets a
	   fixed 44px section title at every width and clamps only the hero and the
	   two headings on Ocean. Reproducing that exactly matters: an over-eager
	   clamp silently shrank every section title to 32px at tablet widths.
	   The phone step-down the design lacks is handled once, at the bottom of
	   this file, rather than by widening these clamps. */
	--size-hero:      clamp(2.75rem, 5.6vw, 4.625rem);  /* 44 → 74px — hero */
	--size-h2:        2.75rem;                          /* 44px flat — section titles on Paper */
	--size-h2-split:  clamp(2rem, 3.4vw, 2.625rem);     /* 32 → 42px — "How we invest" */
	--size-h2-ocean:  clamp(1.875rem, 3.2vw, 2.5rem);   /* 30 → 40px — Contact */
	--size-lede:      1.4375rem;   /* 23px — serif intro paragraph */
	--size-h3:        1.625rem;    /* 26px — section headers inside a portal body */
	--size-subhead:   1.375rem;    /* 22px — serif pull quote / list titles */
	--size-body-lg:   1.1875rem;   /* 19px — lede paragraphs */
	--size-body:      1rem;        /* 16px — card body */
	--size-body-sm:   0.9375rem;   /* 15px — bios */
	--size-meta:      0.875rem;    /* 14px — photo captions, podcast meta */
	--size-nav:       0.8125rem;   /* 13px — nav links */
	--size-eyebrow:   0.65625rem;  /* 10.5px — tracked caps */
	--size-eyebrow-lg: 0.75rem;    /* 12px — a tracked-caps label that heads a
	                                  section rather than labelling one line */
	--size-footnote:  0.75rem;     /* 12px — disclosures */

	--lh-display: 1.15;
	--lh-hero:    1.12;
	--lh-subhead: 1.5;
	--lh-body:    1.65;
	--lh-body-lg: 1.7;

	--track-eyebrow: 0.24em;  /* the firm's typographic signature: 0.18–0.30em */
	--track-nav:     0.18em;

	/* ── Space ──────────────────────────────────────────────────────────── */
	--space-1: 0.25rem;   /*  4px */
	--space-2: 0.5rem;    /*  8px */
	--space-3: 0.75rem;   /* 12px */
	--space-4: 1rem;      /* 16px */
	--space-5: 1.5rem;    /* 24px */
	--space-6: 2rem;      /* 32px */
	--space-7: 3rem;      /* 48px */
	--space-8: 4rem;      /* 64px */
	--space-9: 6rem;      /* 96px */

	/* Section rhythm. The design gives each section its own top and bottom
	   value rather than one uniform figure, and does not reduce them
	   responsively — so these are flat, with a single phone step-down below. */
	--section-y:    104px;  /* default — What we look for, About top */
	--section-y-sm:  96px;  /* About bottom, Thoughts top */
	--section-y-lg: 110px;  /* Contact, and the How we invest text panel */

	/* Rule below a section title: 22px above, and a bottom margin that varies
	   by section in the design. */
	--rule-gap-top:    22px;
	--rule-gap-bottom: 26px;

	/* ── Layout & surface ───────────────────────────────────────────────── */
	--wrap:         1140px;  /* content measure */
	--wrap-nav:     1200px;  /* nav is 60px wider than the body measure */
	--gutter-page:  var(--space-6);
	--nav-height:   76px;

	--radius: 0;     /* square corners throughout — no rounding anywhere */
	--shadow: none;  /* no drop shadows, no 3D */
	--rule:        1px solid var(--rule-hairline);
	--rule-accent-w: 64px;  /* the 64×2px accent rule under section titles */
	--rule-accent-h: 2px;

	/* The light blue hairline. Both lines the deck draws around a biography —
	   the open frame and the short rule under the name — are this one weight
	   and colour. Sky rather than Mist: Mist is a banding tint and is too faint
	   to read as a frame at 1px. */
	--rule-sky: 1px solid var(--sky);
	--pad-bio:  28px;  /* inset from a bio's frame to its content */
	/* How far the two horizontals of a bio's frame run before they stop. Both
	   are anchored at the left edge, so the bracket stays one connected shape. */
	--bio-top:    33%;
	--bio-bottom: 75%;

	/* The criteria card's bracket, from the deck. The Panel box is inset from
	   the cell on three sides; the cell itself runs edge to edge with no column
	   gap, which is what lets the top rule read as one continuous line across
	   the row while the boxes still look separated. Move the separation back
	   into a grid gap and the rule breaks into four.

	   The deck insets the right far harder than this (about 28% of the cell
	   against our 10%). That reads on a slide, where the copy is three short
	   lines; at web body length it squeezed the measure badly enough to add a
	   line to every card, so it is pulled in. One token if you want it wider. */
	--card-panel-top:   44px;
	--card-panel-left:   8px;
	--card-panel-right: 28px;
	--card-bracket:     50%;  /* how far the left vertical drops before stopping */
}

/* Phone step-down.
   The design export is a desktop artefact — it holds a 44px section title and
   104px section padding all the way down to 375px, where both are too large.
   This is the one place the build departs from it, and it departs late: every
   width the export was actually drawn at renders its exact values. */
@media (max-width: 600px) {
	:root {
		--size-h2:      2rem;   /* 32px */
		--section-y:     72px;
		--section-y-sm:  64px;
		--section-y-lg:  72px;
		--gutter-page: var(--space-5);  /* 24px */

		/* One card per row, so the right inset is no longer holding a
		   neighbour off and is only costing measure on the narrowest screen
		   there is — it goes. The left inset stays: it is what the bracket
		   sits against, and losing it would collapse the offset that makes
		   this read as a bracket rather than a plain box with a line on top. */
		--card-panel-top:   28px;
		--card-panel-right:  0px;
	}
}