/*
 * Short aliases over theme.json presets, plus the --bp-* scale.
 * SSOT: theme.json
 * Never redeclare a theme.json value.
 */

:root {
	--navy:    var(--wp--preset--color--navy);
	--deep:    var(--wp--preset--color--deep);
	--blue:    var(--wp--preset--color--blue);
	--sky:     var(--wp--preset--color--sky);
	--cyan:    var(--wp--preset--color--cyan);
	--mint:    var(--wp--preset--color--mint);
	--gold:    var(--wp--preset--color--gold);
	--orange:  var(--wp--preset--color--orange);
	--cream:   var(--wp--preset--color--cream);
	--ink:     var(--wp--preset--color--ink);
	--ink-2:   var(--wp--preset--color--ink-2);
	--line:    var(--wp--preset--color--line);
	--paper:   var(--wp--preset--color--paper);
	--paper-2: var(--wp--preset--color--paper-2);
	--accent:  var(--blue);

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

	/* Fluid; 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);

	--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-xl:      var(--wp--preset--font-size--x-large);
	--text-2xl:     var(--wp--preset--font-size--xx-large);
	--text-display: var(--wp--preset--font-size--display);

	/* --------------------------------------------------------- breakpoints
	 * For JS and reference only: @media can't read var(). The numbers repeat
	 * literally in layout.css only; change both together.
	 */
	--bp-sm: 30em;
	--bp-md: 48em;  /* the one layout switch */
	--bp-lg: 64em;
	--bp-xl: 80em;

	/* Not expressible in theme.json. */
	--wrap:      var(--wp--style--global--wide-size, 1200px);
	--wrap-text: var(--wp--style--global--content-size, 760px);
	--gutter:    var(--s-2);
	--radius:    10px;
	--radius-sm: 6px;
	--ring:      3px solid var(--mint);
	--ease:      cubic-bezier(0.2, 0, 0, 1);
	--dur:       180ms;
	--shadow:    0 1px 2px rgb(1 67 143 / 0.06), 0 10px 30px rgb(1 67 143 / 0.08);
	--tap:       44px; /* WCAG 2.5.8 */
	--gold-fade: linear-gradient(90deg, var(--gold), var(--orange));
	--blue-fade: linear-gradient(90deg, var(--cyan), var(--blue) 90%);
	--wave:      clamp(2.5rem, 5vw, 4.5rem); /* height of a wave edge (page head bottom, cyan band top) */
	--wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 48C230 4 480 2 760 36S1220 86 1440 28V80H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; /* the wave's shape; its colour is the element's background */
}