/* ============================================================
   CartonFactory — Token aliases
   Maps WP theme.json presets to the short CSS vars used by the
   original design (--accent, --bg, etc.). All blocks ported from
   the JSX/CSS can keep using the short names without touching
   theme.json or duplicating tokens.
   ============================================================ */

:root {
	/* Color tokens that map directly to theme.json presets.
	   Mirrors design/css/artdirection.css palette exactly:
	   --orange #e29a56 / --orange-deep #c6792d / --orange-soft rgba(...)
	   --brown #8b560b / --brown-soft #b4832f / --brown-deep #543607 */
	--accent:        var(--wp--preset--color--accent);          /* orange = #e29a56 */
	--accent-deep:   var(--wp--preset--color--accent-deep);     /* #c6792d */
	--accent-soft:   var(--wp--preset--color--accent-soft);     /* rgba(226,154,86,.15) */

	/* Browns: kraft amber for visualizations / nodemaps / kicker-glyph */
	--brown:         var(--wp--preset--color--brown);           /* #8b560b */
	--brown-soft:    var(--wp--preset--color--brown-soft);      /* #b4832f */
	--brown-deep:    var(--wp--preset--color--brown-deep);      /* #543607 */

	/* Aliases used by blocks/hero/style.css and others */
	--orange:        var(--accent);
	--orange-deep:   var(--accent-deep);
	--orange-soft:   var(--accent-soft);
	--accent-3:      var(--brown);       /* legacy alias for the brown token */

	/* Board (cream) panels — used by .tone-raise to flip alternating
	   sections to a warm light surface. Ported from
	   design/css/artdirection.css lines 25-27. */
	--board:         #e0ddd5;
	--board-2:       #d2cfc6;
	--board-raise:   #e9e6df;

	/* Sapphire (deeper black) used for light-theme tone-raise inversion */
	--sapphire:      #0a0a0b;
	--sapphire-2:    #141416;

	--bg:            var(--wp--preset--color--bg);
	--surface:       var(--wp--preset--color--surface);
	--surface-2:     var(--wp--preset--color--surface-2);
	--text:          var(--wp--preset--color--text);
	--text-dim:      var(--wp--preset--color--text-dim);
	--text-faint:    var(--wp--preset--color--text-faint);

	/* Borders + decorative tints — not in theme.json presets because they
	   are RGBA derived from text/bg, not selectable colors. Defined here
	   so blocks can use them as design-system tokens. */
	--border:        rgba(255, 255, 255, 0.10);
	--border-strong: rgba(255, 255, 255, 0.20);
	--raise:         rgba(255, 255, 255, 0.018);
	--viz-line:      rgba(255, 255, 255, 0.11);
	--viz-ring:      rgba(255, 255, 255, 0.045);
	--nav-bg:        rgba(8, 9, 10, 0.72);

	/* Geometry / motion */
	--maxw:          1240px;
	--ease:          cubic-bezier(.22, .61, .36, 1);
	--radius:        3px;
	--sec-pad:       clamp(72px, 9vw, 132px);
	--measure:       56ch;
	--display-tight: -0.03em;
	--grid-deco:     block;
}

/* Light theme overrides for the RGBA tokens (preset colors invert
   automatically via theme.json variations; only RGBA aliases need this). */
[data-theme="light"] {
	--border:        rgba(18, 19, 24, 0.13);
	--border-strong: rgba(18, 19, 24, 0.26);
	--raise:         rgba(18, 19, 24, 0.022);
	--viz-line:      rgba(18, 19, 24, 0.14);
	--viz-ring:      rgba(18, 19, 24, 0.05);
	--nav-bg:        rgba(245, 244, 239, 0.78);
}

/* Editorial direction overrides — straight edges, wider padding, narrower measure. */
[data-dir="editorial"] {
	--radius:        0px;
	--sec-pad:       clamp(96px, 12vw, 176px);
	--measure:       50ch;
	--display-tight: -0.035em;
	--grid-deco:     none;
}