/*
 * AnnGhar UI — Design Tokens
 * ------------------------------------------------------------------
 * The single source of truth for every color, radius, shadow, and
 * spacing value used across the entire AnnGhar frontend — the My
 * Account dashboard, Orders, Addresses, Account Details, My Rewards,
 * and the public [annghar_rewards] landing page all read from this
 * one set of tokens. Nothing below this file may hardcode a color.
 *
 * Scoped under `.ag-ui` (not `body.woocommerce-account`) so the same
 * tokens apply identically whether `.ag-ui` wraps the My Account
 * shell or the public rewards landing page — one design system,
 * usable anywhere this plugin renders UI.
 *
 * Breakpoint convention used throughout responsive.css (documented
 * here since CSS custom properties can't be used inside @media
 * conditions):
 *   Desktop:      > 1200px  (default / no query)
 *   Laptop:       ≤ 1200px
 *   Tablet:       ≤ 900px
 *   Mobile:       ≤ 640px
 *   Small Mobile: ≤ 400px
 */

.ag-ui {
	--ag-primary: #2F6B3F;
	--ag-primary-dark: #235432;
	--ag-gold: #C89B3C;
	--ag-cream: #F8F5ED;
	--ag-bg: #FCFBF7;
	--ag-border: #E8E2D8;
	--ag-text: #222222;
	--ag-muted: #666666;
	--ag-white: #FFFFFF;

	--ag-radius: 18px;
	--ag-radius-sm: 12px;
	--ag-shadow: 0 12px 40px rgba(0, 0, 0, .08);
	--ag-shadow-hover: 0 16px 48px rgba(0, 0, 0, .12);

	--ag-max-width: 1280px;
	--ag-sidebar-width: 280px;
	--ag-gap: 28px;

	--ag-danger: #B3261E;
	--ag-danger-bg: #FBEAE9;
	--ag-success-bg: #E5F2E8;
	--ag-warning-bg: #FDF3E1;
	--ag-warning-text: #9A6B12;
	--ag-info-bg: #F1EEF6;
	--ag-info-text: #5B4E8C;
}