/**
 * ABDS SEO design tokens — the single source of colour, type and spacing for
 * the plugin's admin UI (Stage 7.5).
 *
 * Palette is blue-yellow (Ukraine flag): blue is the primary/interactive colour
 * (buttons, links, active states, focus), yellow is the accent/highlight colour
 * (premium badges, callouts) — never used as large text on a light surface.
 *
 * EVERY text/background and badge/background pair defined here is WCAG-AA
 * verified by src/design-tokens.test.js, which parses this file and computes the
 * real contrast ratios — so a future colour tweak that breaks AA fails the test
 * suite rather than shipping. Don't hardcode colours elsewhere; reference these.
 *
 * The .abds-seo-wrap block also remaps WordPress's own component accent
 * variables to our blue, so @wordpress/components (Buttons, etc.) adopt the
 * palette without per-component overrides. Scoped to our wrapper so the rest of
 * wp-admin is untouched.
 */

:root {
	/* Brand */
	--abds-color-primary: #005bbb;
	--abds-color-primary-hover: #00489a;
	--abds-color-primary-active: #003b7e;
	--abds-color-on-primary: #ffffff;
	--abds-color-accent: #ffd500;
	--abds-color-on-accent: #1e1e1e;

	/* Surfaces & text */
	--abds-color-text: #1e1e1e;
	--abds-color-text-muted: #50575e;
	--abds-color-surface: #ffffff;
	--abds-color-bg: #f0f0f1;
	--abds-color-border: #c3c4c7;
	--abds-color-border-strong: #757575;
	--abds-color-focus: #005bbb;
	--abds-color-link: #005bbb;

	/* Status */
	--abds-color-good-bg: #edfaef;
	--abds-color-good-text: #007017;
	--abds-color-ok-bg: #fcf9e8;
	--abds-color-ok-text: #8a6d00;
	--abds-color-poor-bg: #fcf0f1;
	--abds-color-poor-text: #b32d2e;

	/* Premium / locked-feature teasers */
	--abds-color-premium-bg: #fff8e1;
	--abds-color-premium-text: #5a4b00;
	--abds-color-premium-accent: #ffd500;

	/* Typography */
	--abds-font-size-sm: 12px;
	--abds-font-size-base: 13px;
	--abds-font-size-lg: 16px;
	--abds-font-size-xl: 20px;
	--abds-font-size-display: 32px;
	--abds-line-height: 1.5;
	--abds-font-weight-medium: 500;
	--abds-font-weight-semibold: 600;

	/* Spacing (4px scale) — for controls and in-form gaps. */
	--abds-space-1: 4px;
	--abds-space-2: 8px;
	--abds-space-3: 12px;
	--abds-space-4: 16px;
	--abds-space-5: 20px;
	--abds-space-6: 24px;
	--abds-space-8: 32px;
	--abds-space-10: 40px;
	--abds-space-12: 48px;

	/* Structural spacing (Stage 7.6 bento layout) — deliberately larger than
	   the in-form steps above, so cards breathe: generous inner padding and a
	   real gap between cards, never edge-to-edge. */
	--abds-space-card-padding: 28px;
	--abds-space-section: 24px;

	/* Card-heading emphasis: a clearly larger, heavier title than body text so
	   the hierarchy inside a card reads at a glance. */
	--abds-font-size-card-title: 18px;
	--abds-font-weight-bold: 700;

	/* Shape */
	--abds-radius: 4px;
	--abds-radius-lg: 8px;
	--abds-radius-card: 10px;
	--abds-radius-pill: 999px;
	--abds-shadow-card: 0 1px 2px rgba( 0, 0, 0, 0.05 );
	--abds-shadow-card-raised: 0 1px 3px rgba( 0, 0, 0, 0.08 ), 0 1px 2px rgba( 0, 0, 0, 0.04 );
}

/* No prefers-color-scheme dark variant on purpose: wp-admin is a permanently
   LIGHT environment (WordPress core has no dark admin, and its components render
   dark text). A dark card surface here would leave every WP-default-coloured
   element inside it — headings, @wordpress/components labels, .widefat tables —
   at near-zero contrast. So the plugin's UI stays light to match wp-admin; a
   real dark mode would be a deliberate feature that themes that content too. */

/* Make @wordpress/components adopt our blue as their accent, only within the
   plugin's own screens. WP core reads --wp-admin-theme-color; newer
   @wordpress/components read --wp-components-color-accent. We set both. */
.abds-seo-wrap {
	--wp-admin-theme-color: var( --abds-color-primary );
	--wp-admin-theme-color-darker-10: var( --abds-color-primary-hover );
	--wp-admin-theme-color-darker-20: var( --abds-color-primary-active );
	--wp-components-color-accent: var( --abds-color-primary );
	--wp-components-color-accent-darker-10: var( --abds-color-primary-hover );
	--wp-components-color-accent-darker-20: var( --abds-color-primary-active );
}