/* Short aliases for theme.json presets.
 * SSOT: theme.json
 */

:root {
	/* ---------------------------------------------------------- site palette */
	--yellow:       var(--wp--preset--color--yellow);
	--yellow-line:  var(--wp--preset--color--yellow-line);
	--yellow-ink:   var(--wp--preset--color--yellow-ink);
	--yellow-ink-2: var(--wp--preset--color--yellow-ink-2);

	--navy:         var(--wp--preset--color--navy);
	--navy-2:       var(--wp--preset--color--navy-2);
	--navy-surface: var(--wp--preset--color--navy-surface);
	--navy-line:    var(--wp--preset--color--navy-line);
	--navy-deep:    var(--wp--preset--color--navy-deep);

	--red:          var(--wp--preset--color--red);
	--red-card:     var(--wp--preset--color--red-card);
	--red-cta:      var(--wp--preset--color--red-cta);
	--red-cta-hover:var(--wp--preset--color--red-cta-hover);
	--red-accent:   var(--wp--preset--color--red-accent);
	--red-line:     var(--wp--preset--color--red-line);

	--cream:        var(--wp--preset--color--cream);
	--cream-2:      var(--wp--preset--color--cream-2);
	--warm:         var(--wp--preset--color--warm);
	--warm-2:       var(--wp--preset--color--warm-2);
	--warm-3:       var(--wp--preset--color--warm-3);
	--teal:         var(--wp--preset--color--teal);
	--white:        var(--wp--preset--color--white);

	/* a post's page: black on white */
	--ink:          var(--wp--preset--color--ink);
	--ink-soft:     var(--wp--preset--color--ink-soft);
	--rule:         var(--wp--preset--color--rule);

	/* forms + status */
	--field:      var(--wp--preset--color--field);
	--field-line: var(--wp--preset--color--field-line);
	--field-sel:  var(--wp--preset--color--field-sel);
	--muted:      var(--wp--preset--color--muted);
	--ok:         var(--wp--preset--color--ok);
	--ok-bg:      var(--wp--preset--color--ok-bg);
	--warn:       var(--wp--preset--color--warn);
	--warn-bg:    var(--wp--preset--color--warn-bg);
	--err:        var(--wp--preset--color--err);
	--err-bg:     var(--wp--preset--color--err-bg);

	/* --------------------------------------------------- coach hub (dark UI) */
	--hub-bg:      var(--wp--preset--color--hub-bg);
	--hub-card:    var(--wp--preset--color--hub-card);
	--hub-well:    var(--wp--preset--color--hub-well);
	--hub-line:    var(--wp--preset--color--hub-line);
	--hub-line-2:  var(--wp--preset--color--hub-line-2);
	--hub-dash:    var(--wp--preset--color--hub-dash);
	--hub-row:     var(--wp--preset--color--hub-row);
	--hub-body:    var(--wp--preset--color--hub-body);
	--hub-muted:   var(--wp--preset--color--hub-muted);
	--hub-muted-2: var(--wp--preset--color--hub-muted-2);
	--hub-muted-3: var(--wp--preset--color--hub-muted-3);

	/* color-mix: theme.json cannot express "15% of that colour". */
	--pill-paid:       var(--wp--preset--color--pill-paid);
	--pill-pending:    var(--wp--preset--color--pill-pending);
	--pill-missing:    var(--wp--preset--color--pill-missing);
	--pill-neutral:    var(--wp--preset--color--pill-neutral);
	--pill-paid-bg:    color-mix(in srgb, var(--pill-paid) 15%, transparent);
	--pill-pending-bg: color-mix(in srgb, var(--pill-pending) 15%, transparent);
	--pill-missing-bg: color-mix(in srgb, var(--pill-missing) 16%, transparent);
	--pill-neutral-bg: color-mix(in srgb, var(--pill-neutral) 15%, transparent);
	--pill-eval-bg:    color-mix(in srgb, var(--teal) 15%, transparent);

	--grad-cta: var(--wp--preset--gradient--cta);

	/* ------------------------------------------------------------ typography */
	--font-body:    var(--wp--preset--font-family--body);
	--font-display: var(--wp--preset--font-family--display);

	--text-xxs:     var(--wp--preset--font-size--xx-small);
	--text-xs:      var(--wp--preset--font-size--x-small);
	--text-sm:      var(--wp--preset--font-size--small);
	--text-base:    var(--wp--preset--font-size--medium);
	--text-lg:      var(--wp--preset--font-size--large);
	--text-prose:   var(--wp--preset--font-size--prose);
	--text-xl:      var(--wp--preset--font-size--x-large);
	--text-2xl:     var(--wp--preset--font-size--xx-large);
	--text-section: var(--wp--preset--font-size--section);
	--text-display: var(--wp--preset--font-size--display);

	/* Fluid. Use these for every gap, pad and margin. */
	--s-1: var(--wp--preset--spacing--10);
	--s-2: var(--wp--preset--spacing--20);
	--s-3: var(--wp--preset--spacing--30);
	--s-4: var(--wp--preset--spacing--40);
	--s-5: var(--wp--preset--spacing--50);
	--s-6: var(--wp--preset--spacing--60);
	--s-7: var(--wp--preset--spacing--70);

	/* --------------------------------------------------------- breakpoints
	 * Read by assets/js/breakpoints.js. @media cannot read var(), so md/lg are
	 * repeated in layout.css and xl in theme.css: change both in one edit.
	 */
	--bp-sm: 30em;  /* 480px — large phone */
	--bp-md: 48em;  /* 768px — tablet: tighter gutter, buttons keep their width */
	--bp-lg: 64em;  /* 1024px — the page switches from centred-stacked to split */
	--bp-xl: 80em;  /* 1280px — the header nav fits as a bar */

	/* Not design decisions theme.json can express. */
	--wrap:      var(--wp--style--global--wide-size, 1280px);
	--wrap-text: var(--wp--style--global--content-size, 900px);
	--gutter:    var(--s-4);

	--radius-panel: 28px;
	--radius-card:  22px;
	--radius-soft:  20px;
	--radius-input: 12px;
	--radius-pill:  99px;

	--ring:   2px solid var(--red-cta);
	--ease:   cubic-bezier(0.2, 0, 0, 1);
	--dur:    180ms;
	--shadow-photo: 0 30px 60px rgb(120 60 0 / 0.3);
	--shadow-chip:  0 18px 40px rgb(120 60 0 / 0.35);
	--shadow-cta:   0 12px 30px rgb(223 58 34 / 0.35);
	--shadow-panel: 0 30px 70px rgb(0 0 0 / 0.45);
	--tap:    44px; /* minimum touch target, WCAG 2.5.8 */

	/* Fallback; main.js measures the real header. */
	--header-h: 76px;
}