/* ==========================================================================
   Biscuit variables
   --------------------------------------------------------------------------
   Every variable the theme defines, in one place. The brand's own colors,
   type and logo values are in brand-tokens.css, a byte-identical copy of
   Brand/brand-tokens.css that is never edited in the theme; this file holds
   what the website adds on top of them.

   Loads on every page after brand-tokens.css and before biscuit.css.

   Gathered October 13, 2026, phase 4 of the stylesheet reorganization, from
   the :root blocks that were in style.css and biscuit.css. The old color
   names (--primary-color, --black-color and the rest) were retired the same
   day; the section and button classes ACF saves (primary-bg, btn-primary and
   the rest) keep their names and point at the brand's.
   ========================================================================== */

/*-------------------------------------------------------------------------*/

/* GLOBAL ELEMENTS */

/*-------------------------------------------------------------------------*/

:root {
	/*  FONTS  */
	/* Adobe Fonts serves Neue Haas under its own names, so they go first; the
	   brand tokens carry the desktop names. Adobe serves the heading cut,
	   Display Medium 65, at 600, not 500. See "Type" in biscuit.css. */
	--font-display: "neue-haas-grotesk-display", var(--biscuit-font-display);
	--font-text:    "neue-haas-grotesk-text", var(--biscuit-font-text);
	--weight-heading: 600;                  /* Display Medium 65, as Adobe serves it */
	--weight-bold:    700;                  /* Text Bold 75: buttons, page menu, quote attributions */

	/*  TEXT  */
	/* One scale for the whole site, front end and editor. Tuned by eye from
	   the sizes .prose already used, not from a calculator; brand.md sets no
	   scale. rem, so a reader's larger browser font makes the type larger.
	   The fluid steps hold their smallest size up to about 1360px wide and
	   reach their largest at about 1600 to 1650px. The editor's size menu
	   (custom_tinymce_formats) uses .text-xl to .text-xs, which read these.
	   Phase 6 of the stylesheet reorganization, October 13, 2026. */
	--text-label: 0.75rem;                                 /* 12px: uppercase labels, menu numbers */
	--text-xs: 0.8125rem;                                  /* 13px: captions, tooltips */
	--text-s: 0.9375rem;                                   /* 15px: buttons, bylines, meta, small print */
	--text-m: clamp(1.0625rem, 1.25vw, 1.25rem);           /* 17 to 20px: body text, form fields */
	--text-l: clamp(1.1875rem, 1.4vw, 1.4375rem);          /* 19 to 23px: lead and intro text */
	--text-xl: clamp(1.375rem, 1.8vw, 1.8125rem);          /* 22 to 29px: large text, quotes in posts */

	/*  HEADINGS  */
	--h6: var(--text-m);
	--h5: var(--text-m);
	--h4: var(--text-l);
	--h3: var(--text-xl);
	--h2: clamp(1.625rem, 2.35vw, 2.375rem);              /* 26 to 38px */
	--h1: clamp(2.5rem, 5.2vw, 5.5rem);                   /* 40 to 88px: page and project titles */

	/* The largest type on the site. The home hero headline, the section
	   titles, the menu items and the footer heading all use it. To move the
	   biggest type everywhere, change this one line. */
	--display-xl: clamp(3.125rem, 7.4vw, 8rem);           /* 50 to 128px */

	/*  COLORS  */
	/* Every color comes from brand-tokens.css. Use the role, not the palette
	   name, unless the color itself is the point, such as a ground or a
	   button fill:
	     --biscuit-heading       #2A2A2A  headings
	     --biscuit-body          #4B4B4B  body text
	     --biscuit-muted         #6A6A6A  captions, meta
	     --biscuit-link          #AB3F25  links, hover --biscuit-link-hover #DF5730
	     --biscuit-button        #AB3F25  filled buttons, hover --biscuit-button-hover
	     --biscuit-accent        #DF5730  display type, fills, rules, icons
	     --biscuit-page          #FFFFFF  default ground
	     --biscuit-page-alt      #FCF9F5  alternate ground
	     --biscuit-panel         #F6F1E9  panels and cards
	     --biscuit-ground-dark   #1A1A1A  dark grounds
	     --biscuit-rule          rgba(42, 42, 42, .14)  borders
	   Palette: --biscuit-near-black, --biscuit-orange, --biscuit-orange-deep,
	   --biscuit-gray, --biscuit-cream, --biscuit-off-white, --biscuit-white.
	   #DF5730 fails AA as body-size text on every light ground, so links,
	   filled buttons and grounds under white text take the deep orange and
	   brighten to the brand orange on hover. See Brand/brand.md. */
	--error-color: var(--biscuit-orange-deep);   /* no brand error color; the deep orange passes AA */

	/*  BORDER RADIUS  */
	--border-radius-s: 2px;
	--border-radius-m: 4px;
	--border-radius-l: 8px;

	/*  RULES  October 20, 2026, Jason.
	   Two sizes, one shape: the bar (.rule) and the line (lists, hr). Both
	   have round ends, and a list row's hover tile takes the same radius,
	   inset from its lines by the tile gap (0 sets it flush). The color is
	   one step off the ground, set in biscuit.css by the ground: cream here,
	   off-white on cream, the off-white at .16 on dark. */
	--rule-bar: 10px;
	--rule-line: 5px;
	--rule-radius: 10px;
	--rule-tile-gap: 5px;
	--rule-color: var(--biscuit-cream);

	/*  LAYOUT  */
	--gutter: clamp(24px, 5.6vw, 96px);      /* page gutter */
	--grid-gutter: 1.5rem;                   /* between columns of the span-* grid */

	/*  MOTION  */
	--ease: cubic-bezier(.22, 1, .36, 1);
	--ease-io: cubic-bezier(.76, 0, .24, 1);
}