/**
 * AeroIDX, design tokens.
 *
 * Single source for the colours, radii and easing used by the three admin
 * screens (settings, onboarding, welcome). Every one of those stylesheets
 * declares this file as an enqueue dependency, so the custom properties are
 * always parsed first.
 *
 * Before this file existed the same tokens were declared three times, once per
 * screen wrapper, and had already drifted: `--ax-secondary` was #374151 in
 * admin.css but #4b5563 in the other two. Unified here to #374151 (the higher
 * contrast of the pair, and the value the settings screen already shipped).
 *
 * Two layers, and the split is the point:
 *
 *   Primitives, the AeroIDX Design System scales, carrying the names they
 *                have in Figma (file pVhOGj1SPNttUgUw0CFSan, collection
 *                "AeroIDX/Tokens"). Nothing outside this file references them.
 *   Semantics, what the stylesheets actually consume. Always expressed in
 *                terms of a primitive, never a raw hex.
 *
 * Because the semantic layer never holds its own colour, re-pointing a
 * primitive updates every screen at once. That is what turns the remaining
 * phases (Zinc neutrals, bundled type, dark mode) into edits of this one file
 * instead of a search-and-replace across 1,800 lines.
 *
 * The primitives below still hold the values the plugin ships today, so this
 * file introduces no visual change. Where a value differs from the Design
 * System the delta is recorded inline as `DS:`, that comment set is the
 * worklist for the next phase.
 */

:root {
	/* ── Primitives · brand ──────────────────────────────────────────── */

	--ax-violet-500: #8b5cf6; /* matches DS brand/violet/500 */
	--ax-violet-700: #6d28d9; /* matches DS brand/violet/700 */
	--ax-violet-800: #4c1d95; /* link hover, from the "AI search copy" canvas */
	--ax-violet-900: #3b1f7a; /* ink on a violet wash, from the same canvas */
	--ax-magenta-400: #e879f9; /* matches DS brand/magenta/400 */

	/*
	 * Deep end of the primary-button gradient. Not a named colour token in the
	 * Design System, but specified twice: as the "btn-primary" signature
	 * transition on the Motion page and as the PrimaryButton fill on the
	 * Buttons page, both as linear-gradient(141deg, #8b5cf6, #391eab).
	 */
	--ax-violet-deep: #391eab;

	/* ── Primitives · neutrals ───────────────────────────────────────── */

	/*
	 * The Design System's Zinc ramp. The plugin previously shipped Tailwind
	 * *Gray*, which leans blue; Zinc is near-neutral. Same lightness steps, so
	 * contrast ratios barely move, what changes is that the greys stop fighting
	 * the violet.
	 *
	 * Only the steps this admin consumes are declared. The ramp also runs 200,
	 * 300, 600, 800, 900 and 950; those have no consumer in a light-mode admin,
	 * because container edges are drawn with the alpha hairlines below rather
	 * than a fixed grey. Declaring them unused would be dead code.
	 */
	--ax-neutral-0: #ffffff; /* DS neutral/white */
	--ax-neutral-100: #f4f4f5; /* DS neutral/100, was Gray #f3f4f6 */
	--ax-neutral-500: #71717a; /* DS neutral/500, was Gray #6b7280 */
	/*
	 * neutral/600 exists for ONE reason: text that sits on an input fill.
	 *
	 * neutral/500 clears 4.5:1 on the white card (4.83) but NOT on the #eeeeee
	 * input (4.17) or its #f6f6f6 focus state (4.47). Anything muted that lands
	 * inside a field needs this instead, it measures 6.66 and 7.15 on those two.
	 */
	--ax-neutral-600: #52525b;
	--ax-neutral-700: #3f3f46; /* DS neutral/700, was Gray #374151 */
	--ax-neutral-850: #16161a; /* DS neutral/850, body ink */

	/*
	 * Input fills. These already match the Design System's Forms & Inputs page
	 * exactly (#EEEEEE resting, #F6F6F6 on focus), do not "modernise" them.
	 */
	--ax-fill-input: #eeeeee;
	--ax-fill-input-focus: #f6f6f6;

	/* Selected row/tile wash on the settings screen. */
	--ax-fill-selected: #eceef2;

	/*
	 * Quiet surfaces on the settings screen: a locked (read-only) field, a table
	 * header, and the even rows of a zebra-striped table. Grouped here rather
	 * than left inline because the Zinc swap has to reach them too.
	 *
	 * Note for that phase: the onboarding wizard paints its own locked panel a
	 * violet-tinted #f8f7fc, so "locked" currently means two different colours
	 * depending on the screen. Reconciling them is a visual decision, not a
	 * refactor, so it is deliberately left alone here.
	 */
	--ax-fill-locked: var(--ax-neutral-100);
	--ax-fill-thead: #f9fafb;
	--ax-fill-zebra: #fafafa;

	/* ── Primitives · status ─────────────────────────────────────────── */

	/*
	 * Two intensities per status: the saturated ink used for icons and inline
	 * text, and the wash/edge pair used by notice panels. The Design System
	 * publishes a single status colour each (success #22c55e, danger #ef4444,
	 * warning #f59e0b); the darker inks here are what reads on a light wash.
	 */
	--ax-success: #059669; /* DS status/success = #22c55e */
	--ax-success-wash: #d1fae5;
	/*
	 * Success as TEXT. --ax-success is a fill/indicator colour and does not
	 * carry small text: it measures 3.77:1 on the white card and 3.32:1 on its
	 * own wash, both under the 4.5:1 that 12px and 13px weight-600 text needs. This is the
	 * ink to use whenever the success colour has to be read rather than seen,
	 * 5.48 on white, 4.84 on the wash.
	 */
	--ax-success-ink: #047857;
	--ax-notice-success-bg: #ecfdf5;
	--ax-notice-success-edge: #a7f3d0;
	--ax-notice-success-ink: #065f46;

	--ax-danger: #b91c1c; /* DS status/danger = #ef4444 */
	--ax-danger-wash: #fef2f2;
	--ax-danger-edge: #fecaca;

	/*
	 * Filled destructive button, per the Design System's Buttons page:
	 * bg-red-600 at rest, red-500 on hover, red-700 on press. Note that hover
	 * goes *lighter*, which is the opposite of the usual reflex and is what the
	 * system specifies. The tint is the disc behind a warning icon, one step
	 * stronger than --ax-danger-wash so it reads on a white dialog.
	 */
	--ax-danger-solid: #dc2626;
	--ax-danger-solid-hover: #ef4444;
	--ax-danger-tint: #fee2e2;

	--ax-warning-wash: #fffbeb; /* DS status/warning = #f59e0b */
	--ax-warning-edge: #fde68a;
	--ax-warning-ink: #92400e;

	/* WordPress core's own error red, kept aligned with wp-admin, not the DS. */
	--ax-wp-error: #b32d2e;
	--ax-wp-error-edge: #c6a0a0;

	/* Violet-tinted hairline shared by the onboarding and welcome panels. */
	--ax-violet-edge: #e4d8fb;

	/* ── Primitives · alpha ──────────────────────────────────────────── */

	/*
	 * Violet washes. The Design System expresses these as surface tints over a
	 * dark ground; on the light admin they read as brand-tinted highlights.
	 */
	--ax-violet-a07: rgba(139, 92, 246, 0.07);
	--ax-violet-a10: rgba(139, 92, 246, 0.1);
	--ax-violet-a12: rgba(139, 92, 246, 0.12);
	--ax-violet-a38: rgba(139, 92, 246, 0.38);

	/*
	 * The three stops of the wash a design card draws when it has no picture.
	 *
	 * WHY THREE AND NOT ONE: AeroIDX draws the same card, and its agency branch
	 * (ThemeSelection.vue) runs violet -> indigo -> fuchsia across the diagonal
	 * rather than a flat tint. A single tint reads as a disabled box; the sweep
	 * reads as a surface that is deliberately empty.
	 *
	 * Expressed from THIS plugin's primitives, not Tailwind's. AeroIDX's
	 * purple-500/indigo-500/fuchsia-500 are a different ramp from the Design
	 * System's violet/magenta, and pasting its hexes here would put a fourth
	 * violet in an admin that was cleaned up to hold one.
	 */
	--ax-violet-a15: rgba(139, 92, 246, 0.15); /* violet-500 */
	--ax-violet-deep-a15: rgba(57, 30, 171, 0.15); /* violet-deep */
	--ax-magenta-a15: rgba(232, 121, 249, 0.15); /* magenta-400 */

	/*
	 * Hairlines. The Design System draws container edges with ring/hairline,
	 * `ring-1 ring-foreground/10`, i.e. the foreground colour at 10% rather than
	 * a fixed grey. Expressed here as alpha over the neutral-900 ink.
	 *
	 * On white these land within a shade of the solid greys they replace
	 * (10% ≈ #e6e6e6 against the old #e5e7eb; 18% ≈ #d3d3d3 against #d1d5db), so
	 * light mode barely moves. The gain is that an alpha edge picks up whatever
	 * sits behind it, a tinted panel, a wash, and eventually a dark ground,
	 * instead of staying a flat grey line laid over the top.
	 */
	--ax-hairline: rgba(10, 10, 12, 0.1);
	--ax-hairline-strong: rgba(10, 10, 12, 0.18);

	/* Shadow ink. Tailwind gray-900 at low alpha, as the screens already use. */
	--ax-shadow-a04: rgba(17, 24, 39, 0.04);
	--ax-shadow-a05: rgba(17, 24, 39, 0.05);
	--ax-shadow-a06: rgba(17, 24, 39, 0.06);
	--ax-shadow-a12: rgba(17, 24, 39, 0.12);

	/*
	 * --ax-glow-primary is gone. It lit the hover on the welcome screen's own
	 * copy of the primary button, and that copy went when the button became
	 * `.button.button-primary` like every other primary control. The shared
	 * button already has a hover (brightness plus a shadow tinted with
	 * --ax-violet-a38), so the glow was a third treatment for one control.
	 */

	/*
	 * Scrim behind a modal. DS scrim/black/45. The Overlays page describes it
	 * as 60%, but the named token is the one that survives a redesign, so the
	 * token wins.
	 */
	--ax-scrim: rgba(0, 0, 0, 0.45);

	/* DS shadow/2xl, the tier reserved for surfaces that float over everything. */
	--ax-shadow-overlay: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

	/* ── Semantics · text ────────────────────────────────────────────── */

	/* neutral/850, not /900: #16161a is what the old hand-picked #161616 was
	   reaching for. neutral/900 is the dark *ground*, not body ink. */
	--ax-ink: var(--ax-neutral-850);
	--ax-secondary: var(--ax-neutral-700);
	--ax-muted: var(--ax-neutral-500);
	/* Muted text INSIDE a field, placeholders, and anything else on an input
	 * fill. See the neutral/600 comment: --ax-muted does not clear 4.5:1 there. */
	--ax-muted-on-fill: var(--ax-neutral-600);

	/* ── Semantics · surfaces ────────────────────────────────────────── */

	--ax-card: var(--ax-neutral-0);
	--ax-input: var(--ax-fill-input);
	--ax-input-focus: var(--ax-fill-input-focus);
	--ax-selected: var(--ax-fill-selected);
	--ax-locked: var(--ax-fill-locked);
	--ax-thead: var(--ax-fill-thead);
	--ax-zebra: var(--ax-fill-zebra);

	/*
	 * Foreground on a brand-filled surface (gradient pill buttons, step dots,
	 * the destructive button). Distinct from --ax-card even though both resolve
	 * to white today: one is a surface, the other is ink laid on top of one, and
	 * dark mode moves them apart.
	 */
	--ax-on-accent: var(--ax-neutral-0);

	/* ── Semantics · edges ───────────────────────────────────────────── */

	/*
	 * Kept as `border` rather than converted to an inset box-shadow: a border
	 * occupies layout space and a shadow does not, so swapping the mechanism
	 * across the ~19 bordered rules would shift inner content by a pixel
	 * everywhere. The translucency is what the Design System's ring buys; the
	 * mechanism is not.
	 */
	--ax-border: var(--ax-hairline-strong);
	--ax-border-soft: var(--ax-hairline);

	/*
	 * Boundary of an input, select or textarea (WCAG 1.4.11, non-text
	 * contrast, 3:1). --ax-border is black at 18%, about 1.5:1 on white, which
	 * is right for a decorative card edge and wrong for the line that tells
	 * someone where a field is. #8b8b94 measures 3.38:1 on white, 3.24:1 on
	 * the preview tint (#fafafa) and 3.07:1 on a read-only field (#f4f4f5).
	 * No other token reached 3:1, hence a new one. Used by the SEO modal only
	 * for now; the rest of the admin keeps --ax-border until it is audited.
	 */
	--ax-border-control: #8b8b94;

	/*
	 * The link blue of the simulated Google result in the SEO preview. It is
	 * Google's colour, not ours (the card stands for what Google draws), so no
	 * brand token stands in for it.
	 */
	--ax-sim-google-link: #1a0dab;

	/* ── Semantics · brand ───────────────────────────────────────────── */

	--ax-violet-wash: var(--ax-violet-a07);
	--ax-grad-from: var(--ax-violet-500);
	--ax-grad-to: var(--ax-violet-deep);

	/* ── Semantics · typography ──────────────────────────────────────── */

	/*
	 * One family, Poppins, bundled locally (see fonts.css). It is what the
	 * Design System specifies for body and UI, so nothing is substituted there.
	 *
	 * Headings are the substitution: the Design System sets them in Clash
	 * Display, which is published under the ITF Free Font Licence and so cannot
	 * ship inside a WordPress.org plugin, the directory requires every bundled
	 * asset to be GPL-compatible, and that licence is not. Headings therefore
	 * render as Poppins at weight 700/800, which is the same fallback the
	 * Design System's own Typography page renders with.
	 *
	 * No --ax-font-display token exists yet, deliberately: nothing would
	 * consume it. If a GPL-compatible display face is picked (Outfit, Manrope
	 * and Bricolage Grotesque are all OFL), it arrives here as a second family
	 * plus the heading rules that use it.
	 */
	--ax-font-body: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ax-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

	/*
	 * The Design System type scale is 12 / 14 / 16 / 18 / 20 / 24 / 28 / 32 /
	 * 40 / 48 / 64, with line heights tight 1.1 (display), snug 1.25
	 * (headings), normal 1.5 (UI) and relaxed 1.65 (long-form body), and
	 * tracking −2% on display and +8% on uppercase labels.
	 *
	 * It is recorded here rather than declared as tokens because nothing
	 * consumes it yet: the admin sets 32 of its 55 font-sizes off-scale (13px
	 * alone appears 18 times, and the scale steps straight from 12 to 14).
	 * Snapping them changes the density of every panel and the wrap behaviour
	 * of a fixed-width sidebar, which is a design call rather than a refactor.
	 * Declaring the scale before anything uses it would just ship dead
	 * properties to every admin page.
	 */

	/* ── Semantics · geometry ────────────────────────────────────────── */

	/*
	 * The Design System's radius scale, which replaced eight ad-hoc values
	 * found across the app. Only the steps the admin actually needs are
	 * declared; lg (16), xl (24) and 2xl (32) are unused here.
	 */
	--ax-radius-xs: 4px; /* DS radius/xs */
	--ax-radius-sm: 8px; /* DS radius/sm, rounded-lg */
	--ax-radius-md: 12px; /* DS radius/md, rounded-xl, the Card radius */
	--ax-radius-lg: 16px; /* DS radius/lg, rounded-2xl, floating surfaces */
	--ax-radius-full: 9999px; /* DS radius/full, pill buttons */

	/*
	 * Roles. Everything the screens set is expressed as one of these, so the
	 * scale above stays the only place a number appears.
	 *
	 * --ax-radius-pill previously held 10px and was applied to sidebar nav
	 * items, while the real pills (badges, the primary button) hard-coded
	 * 9999px, the name said one thing and the code did another. The nav role
	 * is now named for what it is, and "pill" means a pill.
	 */
	--ax-radius-chip: var(--ax-radius-xs); /* inline code */
	--ax-radius-tile: var(--ax-radius-sm); /* icon tiles, notice panels */
	--ax-radius-input: var(--ax-radius-sm); /* was 6px */
	--ax-radius-card: var(--ax-radius-md); /* was 8px */
	--ax-radius-overlay: var(--ax-radius-lg); /* modal dialog */
	--ax-radius-nav: var(--ax-radius-md); /* was 10px, as --ax-radius-pill */
	--ax-radius-pill: var(--ax-radius-full); /* badges, primary button */

	/* ── Semantics · motion ──────────────────────────────────────────── */

	/*
	 * DS easing/standard. The plugin previously used cubic-bezier(0, 0, 0.2, 1),
	 * which leaves at full speed; the standard curve eases in as well, so
	 * hovers and the accordion start and stop rather than snapping open.
	 */
	--ax-ease: cubic-bezier(0.4, 0, 0.2, 1);
}