:root {
	--anar-900: #431F25; --anar-800: #5A2A31; --anar-700: #71353D; --anar-600: #8C424C; --anar-500: #A2555F;
	--anar-400: #B57480; --anar-300: #D0A5AD; --anar-200: #E7CCD1; --anar-100: #F6E9EB;

	--shab-900: #191B1F; --shab-800: #24272C; --shab-700: #32363C; --shab-600: #454A51; --shab-500: #5C6269;
	--shab-400: #7C838B; --shab-300: #ADB3BA; --shab-200: #D2D6DB; --shab-100: #EBEEF1;

	/* 650 is a rung the ramp did not have. --sang-600 measured 3.87:1 on a card and
	   --sang-500 2.60:1, both under the 4.5:1 normal text needs, so the two roles that
	   pointed at them now share one colour that clears it. */
	--sang-900: #23252A; --sang-800: #363A40; --sang-700: #52565C; --sang-650: #676C73;
	--sang-600: #7D8288; --sang-500: #9CA1A8;
	--sang-400: #C2C6CB; --sang-300: #E3E5E9; --sang-200: #F0F2F4; --sang-100: #FAFBFC; --sang-000: #FFFFFF;

	--sabz-700: #2E4A3C; --sabz-600: #3E6152; --sabz-500: #527A68; --sabz-100: #E4EDE8;
	--zard-700: #5C5327; --zard-600: #766A33; --zard-500: #96884C; --zard-100: #F0EEDC;

	--text-strong: var(--sang-800); --text-body: var(--sang-700); --text-muted: var(--sang-650);
	--text-faint: var(--sang-650); --text-inverse: var(--sang-100); --text-brand: var(--anar-600);
	--text-link: var(--anar-600); --text-link-hover: var(--anar-800);

	--surface-page: var(--sang-100); --surface-card: var(--sang-000); --surface-sunken: var(--sang-200);
	--surface-inverse: var(--shab-800); --surface-brand: var(--anar-600); --surface-brand-soft: var(--anar-100);
	--surface-accent-soft: var(--shab-100);

	--border-hairline: var(--sang-300); --border-default: var(--sang-400); --border-strong: var(--shab-300);
	--border-brand: var(--anar-600); --border-focus: var(--shab-600);

	/* Unavailable. Handpicked to recede rather than fade with opacity: every part of the
	   control moves toward the surface behind it — pale fill, soft border, light label,
	   low-contrast mark — which is what actually made the old opacity fade read as "off".
	   A checked control keeps a pale version of the brand hue in --fill-disabled-on with its
	   tick or dot in --mark-disabled-on, so on and off stay tellable apart when both are off
	   limits. */
	--surface-disabled: #EDEFF2; --border-disabled: #D2D7DC; --text-disabled: #8F959D;
	--fill-disabled: #B6BCC3; --fill-disabled-on: #D6B7BC; --mark-disabled-on: #96717A;
	--knob-disabled: #FFFFFF;

	--state-success: var(--sabz-600); --state-success-soft: var(--sabz-100);
	--state-warning: var(--zard-600); --state-warning-soft: var(--zard-100);
	--state-danger: var(--anar-700); --state-danger-soft: var(--anar-100);
	--state-info: var(--shab-600); --state-info-soft: var(--shab-100);

	--price-retail: var(--sang-800); --price-wholesale: var(--anar-600); --price-strike: var(--sang-650);

	/* Deal red. Literal, not ramp-derived: identical in both themes so the sale block reads the same. */
	--surface-deal: #9E2A2E; --surface-deal-strong: #852124;
	--text-on-deal: #FFF2F0; --text-on-deal-muted: #EFC3C0; --border-on-deal: rgba(255, 255, 255, .22);

	/* Hover wash for quiet controls sitting on a coloured or dark surface. */
	--wash-on-color: rgba(255, 255, 255, .16);

	/* Text and icon states on a permanently dark surface (toast, footer). Literal, because
	   that surface does not lighten in the dark theme and neither should these. */
	--on-dark-success: #93B9A4; --on-dark-warning: #D2C28C; --on-dark-danger: #D3959D; --on-dark-muted: #ADB3BA;
}

/* The sang neutral ramp inverts by role: 000 stays the card, 100 stays the page, 700-900 stay
   the text. The shab charcoal ramp lifts rather than inverts, so inverse chrome stays dark. */
[data-theme="dark"] {
	color-scheme: dark;

	--anar-900: #E6BEC4; --anar-800: #D3959D; --anar-700: #C88892; --anar-600: #964954; --anar-500: #A2555F;
	--anar-400: #B8828C; --anar-300: #C79BA4; --anar-200: #4A2B31; --anar-100: #3A2227;

	--shab-900: #383D44; --shab-800: #2C3036; --shab-700: #32363C; --shab-600: #4B5057; --shab-500: #5C6269;
	--shab-400: #7C838B; --shab-300: #ADB3BA; --shab-200: #D2D6DB; --shab-100: #22262B;

	--sang-900: #F3F5F7; --sang-800: #E4E7EA; --sang-700: #BFC4CA; --sang-650: #B1B7BE;
	--sang-600: #A3A9B1; --sang-500: #8E949C;
	--sang-400: #454B52; --sang-300: #2E3339; --sang-200: #22262B; --sang-100: #141619; --sang-000: #1C1F24;

	--sabz-700: #A3C2B1; --sabz-600: #8AB09C; --sabz-500: #6E9683; --sabz-100: #1D2C25;
	--zard-700: #D2C28C; --zard-600: #BBA96D; --zard-500: #8E8148; --zard-100: #2C2919;

	--text-inverse: #F3F5F7; --text-brand: var(--anar-700); --text-link: var(--anar-700); --text-link-hover: var(--anar-800);
	--border-strong: var(--sang-500); --border-focus: var(--sang-600);
	--state-info: var(--sang-600); --state-info-soft: var(--shab-100);
	--surface-disabled: #282C31; --border-disabled: #3B4046; --text-disabled: #828993;
	--fill-disabled: #474D54; --fill-disabled-on: #563B41; --mark-disabled-on: #A87C85;
	--knob-disabled: #323740;
	--price-wholesale: var(--anar-700);
	--scrim: rgba(8, 9, 11, .62);
}