@charset "UTF-8";
/**
 * Catcha 2026 — tokens
 *
 * Colour, type, spacing, radii and elevation. Every value the rest of
 * the system reads. Nothing here draws anything.
 *
 * One slice of the stylesheet. Load order and what lives where:
 * docs/MAP.md at the repo root.
 */

/* =====================================================================
 * 01  TOKENS
 * ================================================================== */
:root {
	/* Ground & surfaces — the site's own warm off-white (#F8F6F5), extended
	   into a scale. Not cream, not grey: the original tone. */
	--ground:     #FCFBFA;   /* lifted from #F8F6F5 — nearer white, same warm hue */
	--surface:    #FFFFFF;
	--tint:       #F7F4F2;   /* lifted from #F1ECE9 */
	/* The masthead and the page-title banner under it share one deeper
	   cream, so the top of an inner page reads as a single plane. Half a
	   step below the original #F1ECE9 (#EBE4DF was tried and read heavy),
	   same hue. The home hero stays light. */
	--tint-head:  #EEE8E4;
	--tint-deep:  #E7E0DB;
	--tint-deepest: #DCD3CD; /* one more step down the same warm ramp */
	--tint-red:   #E7E0DB;   /* kept as a name for templates; no longer pink */

	/* Footer — warm stone near-black.
	 *
	 * A mid-tone brown (#4A3B32) was tried here and read as muddy, which is
	 * what mid-tone browns do: at ~20% lightness and ~19% saturation there is
	 * enough colour to look like a colour, and the colour is cardboard. The
	 * fix is not a different hue but a different *value* — take the warm
	 * neutral all the way down until it reads as black-with-warmth rather
	 * than as brown. #1C1917 is warm (R>G>B) but only 4% saturated, so it
	 * reads as a rich black beside the #F8F6F5 ground rather than as mud.
	 *
	 * These are the stone tones from the user's own reference build
	 * (roys-hideout), whose light ground #FAFAF8 is a near-match for this
	 * site's #F8F6F5 — the two palettes are already cousins.
	 */
	--deep:       #1C1917;
	--deep-line:  #332E2A;
	--deep-text:  #F5F0EB;
	--deep-muted: #A8A29E;

	/* Ink — the site's own heading and body colours */
	--ink:        #2B161B;   /* headings, as originally specified */
	--ink-2:      #453E3E;   /* body copy, as originally specified */
	--ink-3:      #6B615E;
	--ink-4:      #9A8F8B;

	/* Accent — sampled from the logo mark, not invented */
	--accent:      #B02828;
	--accent-deep: #8C1E1E;
	--accent-soft: #D9A3A3;
	--accent-wash: rgba(176, 40, 40, 0.06);

	/* Lines */
	--line:      rgba(43, 22, 27, 0.14);
	--line-soft: rgba(43, 22, 27, 0.08);
	--line-firm: rgba(43, 22, 27, 0.26);

	/* Elevation — none. An institutional page is ruled, not stacked: content
	   is separated by hairlines and plane changes, not by drop shadows.
	   Kept as tokens so the many `box-shadow: var(--el-*)` rules resolve to
	   `none` in one place. The only thing that genuinely floats is the nav
	   dropdown, which sets its own shadow. */
	--el-1: none;
	--el-2: none;
	--el-3: none;

	/* Hover — a tile lifts rather than darkens. A step to `--tint` read as a
	   stain of cream sitting in the grid; a barely-off white with a soft,
	   low shadow reads as the tile coming forward instead. Warm-black
	   shadow (the footer's #1C1917), never neutral grey. */
	--hover-surface: #F9F7F5;
	--el-hover: 0 18px 38px -14px rgba(28, 25, 23, 0.22), 0 4px 10px -4px rgba(28, 25, 23, 0.10);

	/* Geometry — square. Rounded corners and pills are the house style of
	   consumer software; an investment firm's furniture is rectangles and
	   rules. Kept as tokens so the value is set once. */
	--r-sm:  0;
	--r:     0;
	--r-lg:  0;
	--r-pill: 0;

	/* Type */
	--serif: Vollkorn, "Iowan Old Style", Georgia, serif;
	--sans:  "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--label: Montserrat, "Open Sans", sans-serif;

	--fs-d1:   clamp(42px, 6.4vw, 88px);
	--fs-d2:   clamp(32px, 4.2vw, 60px);
	--fs-d3:   clamp(26px, 2.9vw, 40px);
	--fs-d4:   clamp(21px, 1.9vw, 27px);
	/* Running text has exactly three sizes: lede (a page's opening
	   paragraph), body, and sm (copy inside a tile or card). Nothing else
	   sets a paragraph size of its own. */
	--fs-lede: clamp(17px, 1.2vw, 18.5px);
	--fs-body: 17px;
	--fs-sm:   15px;
	--fs-label: 11px;

	/* Layout */
	--shell: 1200px;
	--pad:   clamp(20px, 4.5vw, 56px);
	--sec:   clamp(56px, 5.5vw, 88px); /* the one section rhythm — see 02 §section spacing */

	/* Motion */
	--ease:   cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-o: cubic-bezier(0.16, 1, 0.3, 1);
	--dur:    230ms;
}