/* ==========================================================================
   AAG colour tokens. This is the ONLY stylesheet that contains colour literals.
   Every value below is a default built from the plugin's --cr-* variables (Platform Manager).
   Design Studio > Colours prints overrides for any of these on :root (see inc-aag-design.php),
   and picks readable text colours automatically when only a background is set.
   ========================================================================== */
:root {
	/* constants */
	--aag-white: #ffffff;
	--aag-black: #000000;
	--aag-wa-bg: #25D366;
	--aag-wa-dark: #128C4A;
	--aag-wa-hover: #1EBE5A;
	--aag-on-accent: #ffffff;           /* auto-set by PHP from the accent brightness */
	--aag-on-dark: var(--aag-white);
	--aag-on-dark-2: color-mix(in srgb, var(--aag-on-dark) 84%, transparent);
	--aag-on-dark-3: color-mix(in srgb, var(--aag-on-dark) 66%, transparent);

	/* chips: open / closing soon / closed */
	--aag-open-bg: #E6F6EC;    --aag-open-text: #166534;
	--aag-closing-bg: #FFF1E3; --aag-closing-text: #9A3412;
	--aag-closed-bg: #ECEEF4;  --aag-closed-text: #475069;
	--aag-danger: #b42318;

	/* text */
	--aag-heading: var(--cr-text-main);
	--aag-body: var(--cr-text-main);
	--aag-muted: var(--cr-text-muted);
	--aag-link: color-mix(in srgb, var(--cr-accent) 62%, var(--cr-primary));

	/* page + sections */
	--aag-page-bg: var(--cr-bg);
	--aag-sec-light: var(--cr-bg);
	--aag-sec-alt: color-mix(in srgb, var(--cr-accent) 7%, var(--cr-bg));
	--aag-sec-dark: var(--cr-primary);

	/* top ribbon */
	--aag-ribbon-bg: var(--cr-primary);
	--aag-ribbon-text: var(--aag-on-dark-2);
	--aag-ribbon-hover: var(--aag-on-dark);

	/* header */
	--aag-header-bg: var(--cr-surface);              /* solid: page content never shows through */
	--aag-header-text: var(--cr-text-main);
	--aag-header-btn-bg: var(--cr-accent);
	--aag-header-btn-text: var(--aag-on-accent);
	--aag-nav-hover: var(--cr-accent);
	--aag-nav-active: var(--aag-link);

	/* hero */
	--aag-hero-bg: transparent;
	--aag-hero-g1: var(--cr-accent);
	--aag-hero-g2: var(--cr-accent-2);
	--aag-hero-title: var(--aag-heading);
	--aag-hero-sub: var(--aag-muted);
	--aag-hero-hl: var(--aag-link);
	--aag-hero-mark: var(--cr-accent-2);

	/* cards */
	--aag-card-bg: var(--cr-surface);
	--aag-card-border: color-mix(in srgb, var(--cr-text-main) 9%, transparent);
	--aag-card-text: var(--cr-text-main);

	/* buttons */
	--aag-btn1-bg: var(--cr-accent);
	--aag-btn1-text: var(--aag-on-accent);
	--aag-btn1-hover: color-mix(in srgb, var(--aag-btn1-bg) 84%, var(--aag-black));
	--aag-btn2-bg: var(--cr-primary);
	--aag-btn2-text: var(--aag-on-dark);
	--aag-btn2-hover: color-mix(in srgb, var(--aag-btn2-bg) 78%, var(--cr-accent));

	/* bands */
	--aag-cta-bg: var(--cr-primary);
	--aag-cta-glow: var(--cr-accent);
	--aag-cta-text: var(--aag-on-dark);
	--aag-stats-bg: var(--cr-primary);
	--aag-stats-text: var(--aag-on-dark);

	/* footer */
	--aag-footer-bg: var(--cr-primary);
	--aag-footer-text: var(--aag-on-dark);
	--aag-footer-link: color-mix(in srgb, var(--aag-footer-text) 82%, transparent);
	--aag-footer-heading: var(--aag-footer-text);

	/* mobile bottom bar */
	--aag-mbar-bg: var(--cr-primary);                /* solid */
	--aag-mbar-text: var(--aag-on-dark-2);
	--aag-mbar-active: var(--aag-on-dark);
	--aag-mbar-cta-bg: var(--cr-accent);
	--aag-mbar-cta-text: var(--aag-on-accent);

	/* WhatsApp float + cookie banner */
	--aag-wa-float: var(--aag-wa-bg);
	--aag-cookie-bg: color-mix(in srgb, var(--cr-primary) 94%, transparent);
	--aag-cookie-text: var(--aag-on-dark);
}