/*
 * PAHAL — token alias layer.
 *
 * theme.json is the single source of truth for colour, type and space. This
 * file renames those into readable tokens and adds what theme.json cannot
 * express: tracking per optical size, motion, elevation, rules, z-index.
 *
 * Playfair Display is a high-contrast display face. It needs NEGATIVE tracking
 * as it grows and normal tracking at text sizes — that relationship is encoded
 * here rather than guessed at each call site.
 */

:root {
	/* ---- Colour ---------------------------------------------------- */
	--pahal-pine:             var(--wp--preset--color--pine);
	--pahal-pine-deep:        var(--wp--preset--color--pine-deep);
	--pahal-pine-black:       var(--wp--preset--color--pine-black);
	--pahal-pine-tint:        var(--wp--preset--color--pine-tint);
	--pahal-terracotta:       var(--wp--preset--color--terracotta);
	--pahal-terracotta-deep:  var(--wp--preset--color--terracotta-deep);
	--pahal-terracotta-light: var(--wp--preset--color--terracotta-light);
	--pahal-terracotta-tint:  var(--wp--preset--color--terracotta-tint);
	--pahal-canvas:           var(--wp--preset--color--canvas);
	--pahal-sand:             var(--wp--preset--color--sand);
	--pahal-sand-deep:        var(--wp--preset--color--sand-deep);
	--pahal-ink:              var(--wp--preset--color--ink);
	--pahal-ink-soft:         var(--wp--preset--color--ink-soft);
	--pahal-ink-faint:        var(--wp--preset--color--ink-faint);
	--pahal-white:            var(--wp--preset--color--white);

	/*
	 * Surface roles. Components read these, never a named colour, so moving a
	 * component onto a dark band is a one-line override and never a rewrite.
	 */
	--pahal-surface:        var(--pahal-canvas);
	--pahal-surface-raised: var(--pahal-white);
	--pahal-text:           var(--pahal-ink);
	--pahal-text-soft:      var(--pahal-ink-soft);
	--pahal-text-heading:   var(--pahal-pine-deep);
	--pahal-accent:         var(--pahal-terracotta);
	--pahal-accent-text:    var(--pahal-terracotta-deep); /* 6.4:1 on canvas */
	--pahal-rule:           var(--pahal-ink-faint);
	--pahal-rule-strong:    color-mix(in srgb, var(--pahal-ink) 22%, transparent);

	/*
	 * The fill an index row takes on hover. It is a role rather than a colour
	 * because it has to step AWAY from whatever band it sits on: sand over
	 * canvas, white over sand. A single named colour would be invisible on one
	 * of the two, which is exactly what happened before.
	 */
	--pahal-hover-fill:     var(--pahal-sand);

	/* ---- Type ------------------------------------------------------ */
	--pahal-font-sans:    var(--wp--preset--font-family--sans);
	--pahal-font-display: var(--wp--preset--font-family--display);

	--pahal-text-eyebrow:    var(--wp--preset--font-size--eyebrow);
	--pahal-text-s:          var(--wp--preset--font-size--body-s);
	--pahal-text-body:       var(--wp--preset--font-size--body);
	--pahal-text-lead:       var(--wp--preset--font-size--body-l);
	--pahal-text-heading-s:  var(--wp--preset--font-size--heading-s);
	--pahal-text-heading-m:  var(--wp--preset--font-size--heading-m);
	--pahal-text-heading-l:  var(--wp--preset--font-size--heading-l);
	--pahal-text-display-s:  var(--wp--preset--font-size--display-s);
	--pahal-text-display-m:  var(--wp--preset--font-size--display-m);
	--pahal-text-display-l:  var(--wp--preset--font-size--display-l);
	--pahal-text-display-xl: var(--wp--preset--font-size--display-xl);
	--pahal-text-metric:     var(--wp--preset--font-size--metric);

	/*
	 * Optical tracking.
	 *
	 * These were set for a display scale that ran to 112px, where heavy negative
	 * tracking is a real correction. On the restrained scale below — nothing
	 * larger than 52px — the same values read as a preset rather than a
	 * correction: type that has been styled at, instead of set. Negative
	 * tracking now only does the small job it exists for.
	 *
	 * The eyebrow was at 0.2em, which is letterspacing you notice. 0.12em is
	 * enough to make 11px uppercase legible without announcing itself.
	 */
	--pahal-track-hero:    -0.018em;
	--pahal-track-display: -0.012em;
	--pahal-track-heading: -0.006em;
	--pahal-track-body:     0;
	--pahal-track-eyebrow:  0.12em;
	--pahal-track-button:   0.015em;

	/*
	 * Leading.
	 *
	 * The hero was set at 0.96 — lines physically tighter than the font's own
	 * em, so ascenders and descenders interleave. That is a poster technique and
	 * it is the single loudest "made by a machine" signal on a page, because no
	 * one setting a document by hand would do it. Everything here now sits above
	 * 1, and headings breathe.
	 */
	--pahal-leading-hero:    1.1;
	--pahal-leading-display: 1.18;
	--pahal-leading-heading: 1.3;
	--pahal-leading-body:    1.65;

	/* ---- Space -----------------------------------------------------
	 *
	 * NOTE ON THE VARIABLE NAMES — this cost the site its entire vertical
	 * rhythm once and must not be "tidied" back.
	 *
	 * WordPress runs every theme.json preset slug through _wp_to_kebab_case()
	 * before it emits the custom property, and that is a port of lodash's
	 * kebabCase, which inserts a break between a digit and a letter. So the
	 * slug "2xl" is published as --wp--preset--spacing--2-xl, NOT
	 * --wp--preset--spacing--2xl. Slugs that are pure letters ("xs", "m", "l")
	 * are unaffected, which is what made this so easy to miss: half the scale
	 * worked.
	 *
	 * The five hyphenated steps were previously requested without the hyphen.
	 * An undefined var() with no fallback makes the whole declaration invalid
	 * at computed-value time, so `padding-block: var(--pahal-space-2xl)` did
	 * not fall back to something smaller — it fell back to zero. Every loose
	 * section, every page-header band and every 2xs gap on the site was
	 * collapsing.
	 *
	 * Every step now carries a literal fallback matching theme.json. If a
	 * future WordPress release changes the naming again, the layout degrades
	 * to the correct values instead of to nothing.
	 */
	--pahal-space-3xs: var(--wp--preset--spacing--3-xs, 0.25rem);
	--pahal-space-2xs: var(--wp--preset--spacing--2-xs, 0.5rem);
	--pahal-space-xs:  var(--wp--preset--spacing--xs,   1rem);
	--pahal-space-s:   var(--wp--preset--spacing--s,    1.5rem);
	--pahal-space-m:   var(--wp--preset--spacing--m,    2.25rem);
	--pahal-space-l:   var(--wp--preset--spacing--l,    3.5rem);
	--pahal-space-xl:  var(--wp--preset--spacing--xl,   5rem);
	--pahal-space-2xl: var(--wp--preset--spacing--2-xl, 7.5rem);
	--pahal-space-3xl: var(--wp--preset--spacing--3-xl, 10rem);
	--pahal-space-4xl: var(--wp--preset--spacing--4-xl, 13rem);

	/* ---- Layout ---------------------------------------------------- */
	--pahal-width-content: 44rem;
	--pahal-width-wide:    80rem;
	--pahal-gutter:        1.25rem;

	/* ---- Motion ----------------------------------------------------- */
	--pahal-duration-fast:  160ms;
	--pahal-duration-menu:  240ms;
	--pahal-duration-slow:  620ms;
	--pahal-duration-count: 1400ms;
	--pahal-ease:      cubic-bezier(.22, 1, .36, 1);   /* strong settle */
	--pahal-ease-out:  cubic-bezier(.2, .6, .2, 1);

	/* ---- Form ------------------------------------------------------- */
	--pahal-radius:    0;      /* Square. A 2px radius reads as an accident. */
	--pahal-radius-sm: 2px;

	--pahal-shadow-panel: 0 2rem 4rem -1.5rem rgb(6 29 26 / 26%);
	--pahal-shadow-card:  0 1rem 2.5rem -1rem rgb(6 29 26 / 16%);

	--pahal-focus-width:  2px;
	--pahal-focus-offset: 3px;
	--pahal-focus-color:  var(--pahal-terracotta);

	--pahal-z-header: 100;
	--pahal-z-panel:  90;
	--pahal-z-drawer: 200;
	--pahal-z-skip:   300;

	--pahal-header-height: 5.25rem;
}

@media (min-width: 48em) { :root { --pahal-gutter: 2.5rem; } }
@media (min-width: 64em) { :root { --pahal-gutter: 3.5rem; } }
@media (min-width: 90em) { :root { --pahal-gutter: 4.5rem; } }

/*
 * Dark surfaces.
 *
 * The accent flips to terracotta-light because terracotta on pine-deep is
 * 2.4:1 — a measured failure, not a matter of taste. terracotta-light on
 * pine-deep is 7.5:1.
 */
.pahal-on-dark {
	--pahal-surface:        var(--pahal-pine-deep);
	--pahal-surface-raised: var(--pahal-pine);
	--pahal-text:           var(--pahal-sand);
	--pahal-text-soft:      color-mix(in srgb, var(--pahal-sand) 72%, var(--pahal-pine-deep));
	--pahal-text-heading:   var(--pahal-white);
	--pahal-accent:         var(--pahal-terracotta-light);
	--pahal-accent-text:    var(--pahal-terracotta-light);
	--pahal-rule:           rgb(244 239 229 / 18%);
	--pahal-rule-strong:    rgb(244 239 229 / 34%);
	--pahal-hover-fill:     rgb(244 239 229 / 8%);
	--pahal-focus-color:    var(--pahal-terracotta-light);

	background-color: var(--pahal-surface);
	color: var(--pahal-text);
}

/* Warm mid-tone band, for sections that need to sit between light and dark. */
.pahal-on-sand {
	--pahal-surface: var(--pahal-sand);
	--pahal-surface-raised: var(--pahal-canvas);
	--pahal-hover-fill: var(--pahal-white);
	background-color: var(--pahal-surface);
}