/**
 * The Aisle design tokens. Written system: DESIGN.md (repository root).
 *
 * Read every token with its value as the fallback — var(--theaisle-red, #ED1C24) —
 * because some standalone pages print only their own stylesheet.
 */

:root {
	/* Brand — primary */
	--theaisle-red: #ED1C24;        /* the positive action. White text 4.4:1: bold labels only, see DESIGN.md */
	--theaisle-teal: #5DD4BE;       /* accents and fills; never text on white (1.8:1) */

	/* Brand — secondary */
	--theaisle-plum: #470B25;       /* display headings, money. 15.6:1 on white */
	--theaisle-deep-teal: #004346;  /* links, secondary actions, focus rings. 11.1:1 on white */

	/* Derived */
	--theaisle-red-hover: #c41620;  /* hover/active on red. White text 6.0:1 */
	--theaisle-error-text: #c41620; /* error copy; #ED1C24 text fails AA at body size */
	--theaisle-red-text: #c41620;   /* the brand red as text (links, labels): same reason */
	--theaisle-on-red: #FFFFFF;
	--theaisle-focus: #004346;      /* 2px ring, 2px offset */

	/* Toasts (white text on each) */
	--theaisle-toast-success: #047857; /* 5.5:1 */
	--theaisle-toast-error: #c41620;   /* 6.0:1 */
	--theaisle-toast-info: #004346;    /* 11.1:1 */

	/* Shape */
	--theaisle-radius-button: 10px;
	--theaisle-radius-card: 12px;
	--theaisle-button-min-height: 44px;
	--theaisle-shadow-card: 0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04);
}