/* ==========================================================================
   1. TOKENS — the semantic layer
   ==========================================================================

   theme.json defines the RAW values (--wp--preset--color--vermilion).
   This file gives every raw value a JOB (--wva-accent).

   The rule that keeps this system clean:

       Components never name a raw value. They name a job.

   Write   background: var(--wva-surface-sunken);
   Never   background: var(--wp--preset--color--canvas);

   Why it matters: because every component asks for a job rather than a
   colour, a single class can re-point all those jobs at once. That is how
   .wva-context-invert turns an entire dark section legible without a single
   component knowing that dark sections exist.

   Add a token here only when two or more components need it. A value used
   once belongs in that one component.
   ========================================================================== */

:root {
	/* --- Surfaces ------------------------------------------------------- */
	--wva-surface:          var(--wp--preset--color--paper);
	--wva-surface-sunken:   var(--wp--preset--color--canvas);

	/* --- Text ----------------------------------------------------------- */
	--wva-text:             var(--wp--preset--color--ink);
	--wva-text-muted:       var(--wp--preset--color--ink-muted);
	--wva-text-on-accent:   var(--wp--preset--color--paper);

	/* --- Accent --------------------------------------------------------- */
	/* -fill  = large areas and graphics. Never small text.
	   -text  = anything below 24px that must pass WCAG AA. */
	--wva-accent-fill:      var(--wp--preset--color--vermilion);
	--wva-accent-text:      var(--wp--preset--color--vermilion-deep);
	--wva-accent-alt:       var(--wp--preset--color--cobalt);
	--wva-highlight:        var(--wp--preset--color--chalk);

	/* --- Lines and edges ------------------------------------------------ */
	--wva-line:             var(--wp--preset--color--rule);
	--wva-line-strong:      var(--wp--preset--color--ink);
	--wva-line-width:       1px;
	--wva-line-width-heavy: 3px;

	/* --- Geometry ------------------------------------------------------- */
	--wva-radius:           var(--wp--custom--radius--md);
	--wva-radius-sm:        var(--wp--custom--radius--sm);
	--wva-radius-pill:      var(--wp--custom--radius--pill);
	--wva-measure:          var(--wp--custom--measure);
	--wva-measure-narrow:   var(--wp--custom--measure-narrow);

	/* --- Motion --------------------------------------------------------- */
	--wva-duration:         var(--wp--custom--duration--base);
	--wva-duration-fast:    var(--wp--custom--duration--fast);
	--wva-easing:           var(--wp--custom--easing);

	/* --- Focus ---------------------------------------------------------- */
	--wva-focus-ring:       var(--wp--custom--focus-ring);
	--wva-focus-offset:     var(--wp--custom--focus-offset);
}

/* No elevation token on purpose. The design is flat and rule-based; shadow
   presets exist in theme.json for the editor's own shadow control, but no
   component in this theme uses one. If a component ever needs elevation,
   add the alias here first so it is a decision, not a one-off. */


/* --------------------------------------------------------------------------
   COLOUR CONTEXTS

   Put one of these classes on a Group block and everything inside it
   re-points automatically. Components need no dark-mode branches.

   In the editor: select a Group -> Advanced -> Additional CSS class(es)
   -> type the context name. Nothing else to configure.
   -------------------------------------------------------------------------- */

/* Dark editorial band — hero, call-to-action, footer. */
.wva-context-invert {
	--wva-surface:         var(--wp--preset--color--ink);
	--wva-surface-sunken:  var(--wp--custom--context-invert--surface-sunken);

	--wva-text:            var(--wp--preset--color--paper);
	--wva-text-muted:      var(--wp--custom--context-invert--text-muted); /* 8.9:1 on Ink; the light-mode muted grey is only 2.6:1 here */

	--wva-accent-fill:     var(--wp--preset--color--vermilion);
	--wva-accent-text:     var(--wp--preset--color--chalk); /* 11.2:1 on Ink */
	--wva-accent-alt:      var(--wp--preset--color--chalk);

	--wva-line:            rgba(255, 255, 255, 0.18);
	--wva-line-strong:     var(--wp--preset--color--paper);

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

/* Warm off-white band — used to separate sections without a hard rule. */
.wva-context-sunken {
	--wva-surface:        var(--wp--preset--color--canvas);
	--wva-surface-sunken: var(--wp--preset--color--paper);

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

/* Links and headings follow the context they sit in. */
.wva-context-invert :where(a):not(.wp-element-button),
.wva-context-invert :where(.wp-block-post-title a) {
	color: var(--wva-accent-text);
}

.wva-context-invert :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wva-text);
}