/**
 * Semantic design tokens for the tool pages.
 *
 * @package TwentyTwentyFiveChild
 *
 * The tool stylesheets were written against fixed hex values from a Bootstrap
 * grey scale, which meant they stayed light when the rest of the page went
 * dark. They now reference the roles below instead, and the roles resolve to
 * theme.json presets wherever a preset carries the right meaning.
 *
 * Two rules keep this maintainable:
 *
 *   1. A token names a ROLE ("raised surface"), never a colour ("light grey").
 *      Re-slotting the palette is then a change here and nowhere else.
 *
 *   2. Anything that can be expressed against currentColor is, because it then
 *      adapts on its own and needs no dark override. The border and shadow
 *      tokens work this way, which is why the dark block below is short.
 *
 * Loaded as a dependency of each tool stylesheet, so it only ships on pages
 * that actually use it.
 */

:root {
	/* --- Surfaces ----------------------------------------------------- */

	/* The page itself. */
	--agp-surface: var(--wp--preset--color--base);

	/* Cards, table headers, code blocks: one step off the page. */
	--agp-surface-raised: var(--wp--preset--color--accent-5);

	/* Hover states and inset wells: a hint of the text colour, so it tracks
	   whichever direction the scheme is running. */
	--agp-surface-hover: color-mix(in srgb, currentColor 6%, transparent);

	/* --- Text --------------------------------------------------------- */

	--agp-text: var(--wp--preset--color--contrast);
	--agp-text-muted: var(--wp--preset--color--accent-4);

	/* --- Lines -------------------------------------------------------- */

	/* Both derive from currentColor and so need no dark counterpart. */
	--agp-border: color-mix(in srgb, currentColor 18%, transparent);
	--agp-border-strong: color-mix(in srgb, currentColor 38%, transparent);

	/* --- Action (the filled black buttons) ---------------------------- */

	/* Matches how theme.json styles core buttons, so a tool page button and a
	   block button invert together. */
	--agp-action-bg: var(--wp--preset--color--contrast);
	--agp-action-text: var(--wp--preset--color--base);
	--agp-action-bg-hover: color-mix(in srgb, var(--wp--preset--color--contrast) 85%, transparent);

	/* --- Elevation ---------------------------------------------------- */

	/* Full box-shadow values rather than a colour, because dark mode wants a
	   different spread and opacity, not just a different hue. */
	--agp-shadow-sm: 0 2px 4px rgb(0 0 0 / 10%);
	--agp-shadow-md: 0 2px 12px rgb(0 0 0 / 8%);
	--agp-shadow-lg: 0 8px 24px rgb(0 0 0 / 15%);

	/* --- Focus -------------------------------------------------------- */

	--agp-focus-ring: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);

	/* --- Inline code -------------------------------------------------- */

	--agp-code-bg: var(--wp--preset--color--accent-5);
	--agp-code-text: #c2185b;

	/* --- Status ------------------------------------------------------- */

	/* Light values are the Bootstrap alert pairs the tool pages already used.
	   Dark values below are recomputed to hold 7:1 against their own surface,
	   rather than being the same colours on a dark background. */
	--agp-success-bg: #d4edda;
	--agp-success-text: #155724;
	--agp-warning-bg: #fff3cd;
	--agp-warning-text: #856404;
	--agp-danger-bg: #f8d7da;
	--agp-danger-text: #721c24;
	--agp-info-bg: #d1ecf1;
	--agp-info-text: #0c5460;
	--agp-neutral-bg: #e2e3e5;
	--agp-neutral-text: #383d41;

	/* Status text used on a surface rather than inside a badge. Measured
	   against the RAISED surface, not the page: that is where it actually
	   lands (inside a card), and it is the tighter of the two. */
	--agp-danger-ink: #c62232;

	/* --- Syntax highlighting ------------------------------------------ */

	/* Derived from PrismJS 1.29's default theme, darkened until every token
	   clears 5:1 on the code background. Six of the eight originals failed AA
	   (punctuation was 2.56:1, regex 2.05:1).
	
	   Contrast alone is not the whole job: the stock theme separates comments
	   and punctuation from live code by making them PALE, and that is exactly
	   what AA forbids. So the hierarchy is re-encoded as chroma instead --
	   comment and punctuation are held in a 5.4-6.2:1 band, muted and well
	   short of the code text's own 18:1, so they still recede -- while the
	   semantic tokens run darker and more saturated.
	
	   Values were solved for maximum mutual separation under those bounds.
	   The closest pair is dE 17.8, against 15.0 in the theme they came from,
	   so tokens are marginally easier to tell apart than before, not harder. */
	--agp-syntax-comment: #425c75;     /* 6.24:1 */
	--agp-syntax-punctuation: #636363; /* 5.39:1 */
	--agp-syntax-value: #990055;       /* 7.58:1, the one original that passed */
	--agp-syntax-string: #4d7300;      /* 5.00:1 */
	--agp-syntax-operator: #876033;    /* 5.02:1 */
	--agp-syntax-keyword: #006f9e;     /* 5.00:1 */
	--agp-syntax-function: #c62546;    /* 5.02:1 */
	--agp-syntax-regex: #915d00;       /* 5.00:1 */

	/* --- Decorative panel --------------------------------------------- */

	/* A soft tinted well. Light in light mode, dark in dark mode, so text
	   inheriting --agp-text stays readable on it either way. */
	--agp-panel: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

:root[data-theme="dark"] {
	--agp-shadow-sm: 0 2px 4px rgb(0 0 0 / 40%);
	--agp-shadow-md: 0 2px 12px rgb(0 0 0 / 45%);
	--agp-shadow-lg: 0 8px 24px rgb(0 0 0 / 55%);

	--agp-code-text: #eb559a;

	--agp-success-bg: #142f1a;
	--agp-success-text: #36ce58;
	--agp-warning-bg: #332b0f;
	--agp-warning-text: #e7ae07;
	--agp-danger-bg: #330f12;
	--agp-danger-text: #e38d95;
	--agp-info-bg: #0f2d33;
	--agp-info-text: #1cc5e1;
	--agp-neutral-bg: #1f2123;
	--agp-neutral-text: #a5acb1;

	--agp-danger-ink: #e4636f; /* 5.0:1 on #1e1e1e, 5.6:1 on the page */

	/* Solved the same way as the light set, against #1e1e1e. Closest pair is
	   dE 23.6 here; the dark background gives the muted band more room. */
	--agp-syntax-comment: #708fae;     /* 4.95:1 */
	--agp-syntax-punctuation: #adadad; /* 7.43:1 */
	--agp-syntax-value: #ff35a5;       /* 5.00:1 */
	--agp-syntax-string: #689c00;      /* 5.04:1 */
	--agp-syntax-operator: #b78245;    /* 5.00:1 */
	--agp-syntax-keyword: #009adb;     /* 5.28:1 */
	--agp-syntax-function: #e2637d;    /* 5.01:1 */
	--agp-syntax-regex: #ee9900;       /* 7.30:1 */

	--agp-panel: linear-gradient(135deg, #1c1f24 0%, #262c36 100%);
}