/**
 * ApprovalTrail child theme — derived token layer (design-system.md §1).
 *
 * ADDITIVE ONLY. No --at-* token is redefined here or anywhere else in the
 * theme. Every variable below composes a brand token from
 * assets/css/tokens.css (byte-identical copy of the brand-kit source).
 *
 * design-system.md §1 shows an @import of the brand file at the top; the theme
 * enqueues tokens.css as a separate handle instead (theme-plan.md §2.5 fixes
 * the enqueue order), so the @import is intentionally omitted — an @import
 * would add a render-blocking round trip for the same result.
 */

:root {
	/* --- Surfaces & section rhythm ------------------------------------ */
	--att-surface-page:       var(--at-paper-100);
	--att-surface-card:       var(--at-surface);
	/*
	 * The alternating band's history, because it has been tuned twice:
	 * --at-paper-50 (#FBFAF7) was a ~2% step — invisible. #EAE5D9 was a hard
	 * step that, with hairline borders top and bottom, read as outlined
	 * stripes — the "blocky" verdict of the 2026-08-16 design audit
	 * (design-polish-plan.md P1.5). The register now: a soft half-step
	 * between page and the old band, with NO band borders — a surface change
	 * you feel more than see, per the plan's option (b). Body text on it
	 * stays AAA.
	 */
	--att-surface-band:       #EFEBE1;
	--att-surface-inverse:    var(--at-ink-800);
	--att-surface-inverse-fg: #ffffff;
	--att-hairline:           var(--at-paper-200);

	/* --- Display type -------------------------------------------------- */
	--att-font-display:     var(--at-font-heading);
	--att-font-ui:          var(--at-font-body);
	--att-display-leading:  var(--at-leading-tight);
	--att-display-tracking: var(--at-tracking-tight);
	--att-lead-size:        var(--at-size-lg);
	--att-eyebrow-size:     var(--at-size-sm);
	--att-eyebrow-tracking: 0.08em;
	/*
	 * Hero display size (design-polish-plan.md P1.3): the modular scale tops
	 * out at 49px (--at-size-4xl) and the next step (61px) overshoots, so the
	 * hero h1 gets its own clamp up to 3.5rem/56px on wide viewports. Falls
	 * back through 3xl on small screens exactly as before.
	 */
	--att-hero-h1-size:     clamp(var(--at-size-3xl), 1.55rem + 2.4vw, 3.5rem);

	/* --- Layout -------------------------------------------------------- */
	--att-section-y:    var(--at-space-9);
	--att-section-y-sm: var(--at-space-7);
	--att-row-gap:      var(--at-space-6);
	--att-grid-gap:     var(--at-space-5);
	--att-hero-max:     60rem;

	/* --- Components ----------------------------------------------------
	 * Radii and padding revised 2026-08-16 (design-polish-plan.md P1.2/P1.4,
	 * brand-kit §5 amended in the same commit): cards 8→12px, buttons 4→8px,
	 * card padding 24→32px. Still flat fills, still no pill. */
	--att-card-radius: var(--at-radius-xl);
	--att-card-border: var(--at-rule);
	--att-card-pad:    var(--at-space-6);
	--att-btn-radius:  var(--at-radius-lg);
	--att-btn-pad-y:   var(--at-space-3);
	--att-btn-pad-x:   var(--at-space-5);
	--att-shot-mat:    var(--at-space-3);
	--att-tap-min:     44px;

	/*
	 * Interactive-control boundary — WCAG 2.1 AA 1.4.11 (Non-text Contrast).
	 * The visual boundary of a UI component needs >= 3:1. --at-rule resolves to
	 * --at-neutral-300 (#CFCCC6): 1.60:1 on white, 1.42:1 on --at-paper-100 —
	 * acceptable for a decorative divider, not for a control.
	 * --at-neutral-600 (#5B5750): 7.18:1 on white, 6.37:1 on --at-paper-100,
	 * 6.88:1 on --at-paper-50 — every surface a control can sit on.
	 *
	 * Use this ANYWHERE a border is the sole visual boundary of an interactive
	 * control (inputs, textareas, selects, transparent-background buttons).
	 * Keep --at-rule / --att-hairline for decorative rules and card edges.
	 */
	--att-control-border: var(--at-border-width) solid var(--at-neutral-600);
}