/* -------------------------------------------
 *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
 * ------------------------------------------- */

:root {
	--wpds-border-radius-large: 8px; /* Large radius */
	--wpds-border-radius-medium: 4px; /* Medium radius */
	--wpds-border-radius-small: 2px; /* Small radius */
	--wpds-border-radius-x-small: 1px; /* Extra small radius */
	--wpds-border-width-focus: 2px; /* Border width for focus ring */
	--wpds-color-bg-interactive-brand: #0000; /* Background color for interactive elements with brand tone and normal emphasis. */
	--wpds-color-bg-interactive-brand-active: var(--wpds-color-private-primary-surface2); /* Background color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. */
	--wpds-color-bg-interactive-brand-disabled: var(--wpds-color-private-bg-surface5); /* Background color for interactive elements with brand tone and normal emphasis, in their disabled state. */
	--wpds-color-bg-interactive-brand-strong: var(--wpds-color-private-primary-bg-fill1); /* Background color for interactive elements with brand tone and strong emphasis. */
	--wpds-color-bg-interactive-brand-strong-active: var(--wpds-color-private-primary-bg-fill2); /* Background color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */
	--wpds-color-bg-interactive-brand-strong-disabled: var(--wpds-color-private-bg-surface6); /* Background color for interactive elements with brand tone and strong emphasis, in their disabled state. */
	--wpds-color-bg-interactive-brand-weak: #0000; /* Background color for interactive elements with brand tone and weak emphasis. */
	--wpds-color-bg-interactive-brand-weak-active: var(--wpds-color-private-primary-surface4); /* Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active. */
	--wpds-color-bg-interactive-brand-weak-disabled: var(--wpds-color-private-bg-surface5); /* Background color for interactive elements with brand tone and weak emphasis, in their disabled state. */
	--wpds-color-bg-interactive-neutral: #0000; /* Background color for interactive elements with neutral tone and normal emphasis. */
	--wpds-color-bg-interactive-neutral-active: var(--wpds-color-private-bg-surface4); /* Background color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. */
	--wpds-color-bg-interactive-neutral-disabled: var(--wpds-color-private-bg-surface5); /* Background color for interactive elements with neutral tone and normal emphasis, in their disabled state. */
	--wpds-color-bg-interactive-neutral-strong: var(--wpds-color-private-bg-bg-fill-inverted1); /* Background color for interactive elements with neutral tone and strong emphasis. */
	--wpds-color-bg-interactive-neutral-strong-active: var(--wpds-color-private-bg-bg-fill-inverted2); /* Background color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active. */
	--wpds-color-bg-interactive-neutral-strong-disabled: var(--wpds-color-private-bg-surface6); /* Background color for interactive elements with neutral tone and strong emphasis, in their disabled state. */
	--wpds-color-bg-interactive-neutral-weak: #0000; /* Background color for interactive elements with neutral tone and weak emphasis. */
	--wpds-color-bg-interactive-neutral-weak-active: var(--wpds-color-private-bg-surface4); /* Background color for interactive elements with neutral tone and weak emphasis that are hovered, focused, or active. */
	--wpds-color-bg-interactive-neutral-weak-disabled: var(--wpds-color-private-bg-surface5); /* Background color for interactive elements with neutral tone and weak emphasis, in their disabled state. */
	--wpds-color-bg-surface-brand: var(--wpds-color-private-primary-surface1); /* Background color for surfaces with brand tone and normal emphasis. */
	--wpds-color-bg-surface-caution: var(--wpds-color-private-caution-surface4); /* Background color for surfaces with caution tone and normal emphasis. */
	--wpds-color-bg-surface-caution-weak: var(--wpds-color-private-caution-surface2); /* Background color for surfaces with caution tone and weak emphasis. */
	--wpds-color-bg-surface-error: var(--wpds-color-private-error-surface4); /* Background color for surfaces with error tone and normal emphasis. */
	--wpds-color-bg-surface-error-weak: var(--wpds-color-private-error-surface2); /* Background color for surfaces with error tone and weak emphasis. */
	--wpds-color-bg-surface-info: var(--wpds-color-private-info-surface4); /* Background color for surfaces with info tone and normal emphasis. */
	--wpds-color-bg-surface-info-weak: var(--wpds-color-private-info-surface2); /* Background color for surfaces with info tone and weak emphasis. */
	--wpds-color-bg-surface-neutral: var(--wpds-color-private-bg-surface2); /* Background color for surfaces with normal emphasis. */
	--wpds-color-bg-surface-neutral-strong: var(--wpds-color-private-bg-surface3); /* Background color for surfaces with strong emphasis. */
	--wpds-color-bg-surface-neutral-weak: var(--wpds-color-private-bg-surface1); /* Background color for surfaces with weak emphasis. */
	--wpds-color-bg-surface-success: var(--wpds-color-private-success-surface4); /* Background color for surfaces with success tone and normal emphasis. */
	--wpds-color-bg-surface-success-weak: var(--wpds-color-private-success-surface2); /* Background color for surfaces with success tone and weak emphasis. */
	--wpds-color-bg-surface-warning: var(--wpds-color-private-warning-surface4); /* Background color for surfaces with warning tone and normal emphasis. */
	--wpds-color-bg-surface-warning-weak: var(--wpds-color-private-warning-surface2); /* Background color for surfaces with warning tone and weak emphasis. */
	--wpds-color-bg-thumb-brand: var(--wpds-color-private-primary-stroke3); /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track). */
	--wpds-color-bg-thumb-brand-active: var(--wpds-color-private-primary-stroke3); /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track) that are hovered, focused, or active. */
	--wpds-color-bg-thumb-brand-disabled: var(--wpds-color-private-bg-stroke2); /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track), in their disabled state. */
	--wpds-color-bg-thumb-neutral-weak: var(--wpds-color-private-bg-stroke3); /* Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb). */
	--wpds-color-bg-thumb-neutral-weak-active: var(--wpds-color-private-bg-stroke4); /* Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb) that are hovered, focused, or active. */
	--wpds-color-bg-track-neutral: var(--wpds-color-private-bg-stroke2); /* Background color for tracks with a neutral tone and normal emphasis (eg. slider or progressbar track). */
	--wpds-color-bg-track-neutral-weak: var(--wpds-color-private-bg-stroke1); /* Background color for tracks with a neutral tone and weak emphasis (eg. scrollbar track). */
	--wpds-color-fg-content-caution: var(--wpds-color-private-caution-fg-surface4); /* Foreground color for content like text with caution tone and normal emphasis. */
	--wpds-color-fg-content-caution-weak: var(--wpds-color-private-caution-fg-surface3); /* Foreground color for content like text with caution tone and weak emphasis. */
	--wpds-color-fg-content-error: var(--wpds-color-private-error-fg-surface4); /* Foreground color for content like text with error tone and normal emphasis. */
	--wpds-color-fg-content-error-weak: var(--wpds-color-private-error-fg-surface3); /* Foreground color for content like text with error tone and weak emphasis. */
	--wpds-color-fg-content-info: var(--wpds-color-private-info-fg-surface4); /* Foreground color for content like text with info tone and normal emphasis. */
	--wpds-color-fg-content-info-weak: var(--wpds-color-private-info-fg-surface3); /* Foreground color for content like text with info tone and weak emphasis. */
	--wpds-color-fg-content-neutral: var(--wpds-color-private-bg-fg-surface4); /* Foreground color for content like text with normal emphasis. */
	--wpds-color-fg-content-neutral-weak: var(--wpds-color-private-bg-fg-surface3); /* Foreground color for content like text with weak emphasis. */
	--wpds-color-fg-content-success: var(--wpds-color-private-success-fg-surface4); /* Foreground color for content like text with success tone and normal emphasis. */
	--wpds-color-fg-content-success-weak: var(--wpds-color-private-success-fg-surface3); /* Foreground color for content like text with success tone and weak emphasis. */
	--wpds-color-fg-content-warning: var(--wpds-color-private-warning-fg-surface4); /* Foreground color for content like text with warning tone and normal emphasis. */
	--wpds-color-fg-content-warning-weak: var(--wpds-color-private-warning-fg-surface3); /* Foreground color for content like text with warning tone and weak emphasis. */
	--wpds-color-fg-interactive-brand: var(--wpds-color-private-primary-fg-surface3); /* Foreground color for interactive elements with brand tone and normal emphasis. */
	--wpds-color-fg-interactive-brand-active: var(--wpds-color-private-primary-fg-surface3); /* Foreground color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. */
	--wpds-color-fg-interactive-brand-disabled: var(--wpds-color-private-bg-fg-surface2); /* Foreground color for interactive elements with brand tone and normal emphasis, in their disabled state. */
	--wpds-color-fg-interactive-brand-strong: var(--wpds-color-private-primary-fg-fill); /* Foreground color for interactive elements with brand tone and strong emphasis. */
	--wpds-color-fg-interactive-brand-strong-active: var(--wpds-color-private-primary-fg-fill); /* Foreground color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */
	--wpds-color-fg-interactive-brand-strong-disabled: var(--wpds-color-private-bg-fg-surface3); /* Foreground color for interactive elements with brand tone and strong emphasis, in their disabled state. */
	--wpds-color-fg-interactive-neutral: var(--wpds-color-private-bg-fg-surface4); /* Foreground color for interactive elements with neutral tone and normal emphasis. */
	--wpds-color-fg-interactive-neutral-active: var(--wpds-color-private-bg-fg-surface4); /* Foreground color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. */
	--wpds-color-fg-interactive-neutral-disabled: var(--wpds-color-private-bg-fg-surface2); /* Foreground color for interactive elements with neutral tone and normal emphasis, in their disabled state. */
	--wpds-color-fg-interactive-neutral-strong: var(--wpds-color-private-bg-fg-fill-inverted); /* Foreground color for interactive elements with neutral tone and strong emphasis. */
	--wpds-color-fg-interactive-neutral-strong-active: var(--wpds-color-private-bg-fg-fill-inverted); /* Foreground color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active. */
	--wpds-color-fg-interactive-neutral-strong-disabled: var(--wpds-color-private-bg-fg-surface3); /* Foreground color for interactive elements with neutral tone and strong emphasis, in their disabled state. */
	--wpds-color-fg-interactive-neutral-weak: var(--wpds-color-private-bg-fg-surface3); /* Foreground color for interactive elements with neutral tone and weak emphasis. */
	--wpds-color-fg-interactive-neutral-weak-disabled: var(--wpds-color-private-bg-fg-surface2); /* Foreground color for interactive elements with neutral tone and weak emphasis, in their disabled state. */
	--wpds-color-private-bg-bg-fill-dark: #1e1e1e;
	--wpds-color-private-bg-bg-fill-inverted1: #2f2f2f;
	--wpds-color-private-bg-bg-fill-inverted2: #1e1e1e;
	--wpds-color-private-bg-bg-fill1: #555;
	--wpds-color-private-bg-bg-fill2: #474747;
	--wpds-color-private-bg-fg-fill: #f0f0f0;
	--wpds-color-private-bg-fg-fill-dark: #f0f0f0;
	--wpds-color-private-bg-fg-fill-inverted: #f0f0f0;
	--wpds-color-private-bg-fg-surface1: #a9a9a9;
	--wpds-color-private-bg-fg-surface2: #898989;
	--wpds-color-private-bg-fg-surface3: #6d6d6d;
	--wpds-color-private-bg-fg-surface4: #1e1e1e;
	--wpds-color-private-bg-stroke1: #d0d0d0;
	--wpds-color-private-bg-stroke2: #adadad;
	--wpds-color-private-bg-stroke3: #898989;
	--wpds-color-private-bg-stroke4: #6a6a6a;
	--wpds-color-private-bg-surface1: #f0f0f0;
	--wpds-color-private-bg-surface2: #f8f8f8;
	--wpds-color-private-bg-surface3: #fff;
	--wpds-color-private-bg-surface4: #eaeaea;
	--wpds-color-private-bg-surface5: #dfdfdf;
	--wpds-color-private-bg-surface6: #d0d0d0;
	--wpds-color-private-caution-bg-fill-dark: #1f1e1b;
	--wpds-color-private-caution-bg-fill-inverted1: #3d2d00;
	--wpds-color-private-caution-bg-fill-inverted2: #1f1e1b;
	--wpds-color-private-caution-bg-fill1: #f0d149;
	--wpds-color-private-caution-bg-fill2: #dabb2b;
	--wpds-color-private-caution-fg-fill: #1f1e1b;
	--wpds-color-private-caution-fg-fill-dark: #f6f1da;
	--wpds-color-private-caution-fg-fill-inverted: #f6f1da;
	--wpds-color-private-caution-fg-surface1: #c6a800;
	--wpds-color-private-caution-fg-surface2: #a58700;
	--wpds-color-private-caution-fg-surface3: #866a00;
	--wpds-color-private-caution-fg-surface4: #291d00;
	--wpds-color-private-caution-stroke1: #b8ab76;
	--wpds-color-private-caution-stroke2: #988d60;
	--wpds-color-private-caution-stroke3: #866a00;
	--wpds-color-private-caution-stroke4: #644e00;
	--wpds-color-private-caution-surface1: #faf1cb;
	--wpds-color-private-caution-surface2: #fdf9e7;
	--wpds-color-private-caution-surface3: #fff;
	--wpds-color-private-caution-surface4: #f8ebb6;
	--wpds-color-private-caution-surface5: #f4e08c;
	--wpds-color-private-caution-surface6: #e7d070;
	--wpds-color-private-error-bg-fill-dark: #241c1b;
	--wpds-color-private-error-bg-fill-inverted1: #6d0000;
	--wpds-color-private-error-bg-fill-inverted2: #241c1b;
	--wpds-color-private-error-bg-fill1: #e10006;
	--wpds-color-private-error-bg-fill2: #c90000;
	--wpds-color-private-error-fg-fill: #f3f0ef;
	--wpds-color-private-error-fg-fill-dark: #f2efef;
	--wpds-color-private-error-fg-fill-inverted: #f2efef;
	--wpds-color-private-error-fg-surface1: #ff8072;
	--wpds-color-private-error-fg-surface2: #ff3632;
	--wpds-color-private-error-fg-surface3: #df0003;
	--wpds-color-private-error-fg-surface4: #4a0000;
	--wpds-color-private-error-stroke1: #e0978d;
	--wpds-color-private-error-stroke2: #d66c61;
	--wpds-color-private-error-stroke3: #df0003;
	--wpds-color-private-error-stroke4: #ac0000;
	--wpds-color-private-error-surface1: #fcecea;
	--wpds-color-private-error-surface2: #fef6f5;
	--wpds-color-private-error-surface3: #fff;
	--wpds-color-private-error-surface4: #fbe5e2;
	--wpds-color-private-error-surface5: #f9d8d3;
	--wpds-color-private-error-surface6: #f6c4bd;
	--wpds-color-private-info-bg-fill-dark: #1b1e23;
	--wpds-color-private-info-bg-fill-inverted1: #00297a;
	--wpds-color-private-info-bg-fill-inverted2: #1b1e23;
	--wpds-color-private-info-bg-fill1: #0090ff;
	--wpds-color-private-info-bg-fill2: #007eec;
	--wpds-color-private-info-fg-fill: #1b1e23;
	--wpds-color-private-info-fg-fill-dark: #eff0f2;
	--wpds-color-private-info-fg-fill-inverted: #eff0f2;
	--wpds-color-private-info-fg-surface1: #4dafff;
	--wpds-color-private-info-fg-surface2: #008bfa;
	--wpds-color-private-info-fg-surface3: #006cd8;
	--wpds-color-private-info-fg-surface4: #001758;
	--wpds-color-private-info-stroke1: #8baed6;
	--wpds-color-private-info-stroke2: #5e90c7;
	--wpds-color-private-info-stroke3: #006cd8;
	--wpds-color-private-info-stroke4: #004bb5;
	--wpds-color-private-info-surface1: #e9f1fa;
	--wpds-color-private-info-surface2: #f5f9fd;
	--wpds-color-private-info-surface3: #fff;
	--wpds-color-private-info-surface4: #e1ecf8;
	--wpds-color-private-info-surface5: #d1e1f5;
	--wpds-color-private-info-surface6: #bad3f0;
	--wpds-color-private-primary-bg-fill-dark: #1b1e26;
	--wpds-color-private-primary-bg-fill-inverted1: #1401a4;
	--wpds-color-private-primary-bg-fill-inverted2: #1b1e26;
	--wpds-color-private-primary-bg-fill1: #3858e9;
	--wpds-color-private-primary-bg-fill2: #2c47d7;
	--wpds-color-private-primary-fg-fill: #eff0f2;
	--wpds-color-private-primary-fg-fill-dark: #eff0f2;
	--wpds-color-private-primary-fg-fill-inverted: #eff0f2;
	--wpds-color-private-primary-fg-surface1: #81a7ff;
	--wpds-color-private-primary-fg-surface2: #5780ff;
	--wpds-color-private-primary-fg-surface3: #3858e9;
	--wpds-color-private-primary-fg-surface4: #080071;
	--wpds-color-private-primary-stroke1: #92a4cf;
	--wpds-color-private-primary-stroke2: #6f85c0;
	--wpds-color-private-primary-stroke3: #3858e9;
	--wpds-color-private-primary-stroke4: #2236c7;
	--wpds-color-private-primary-surface1: #ecf0f9;
	--wpds-color-private-primary-surface2: #f6f8fc;
	--wpds-color-private-primary-surface3: #fff;
	--wpds-color-private-primary-surface4: #e5eaf7;
	--wpds-color-private-primary-surface5: #d8e0f3;
	--wpds-color-private-primary-surface6: #c4d0ee;
	--wpds-color-private-success-bg-fill-dark: #1b1f1c;
	--wpds-color-private-success-bg-fill-inverted1: #003a00;
	--wpds-color-private-success-bg-fill-inverted2: #1b1f1c;
	--wpds-color-private-success-bg-fill1: #4ab866;
	--wpds-color-private-success-bg-fill2: #34a554;
	--wpds-color-private-success-fg-fill: #1b1f1c;
	--wpds-color-private-success-fg-fill-dark: #edf2ed;
	--wpds-color-private-success-fg-fill-inverted: #edf2ed;
	--wpds-color-private-success-fg-surface1: #52bf6d;
	--wpds-color-private-success-fg-surface2: #2a9e4d;
	--wpds-color-private-success-fg-surface3: #008030;
	--wpds-color-private-success-fg-surface4: #002b00;
	--wpds-color-private-success-stroke1: #78ba84;
	--wpds-color-private-success-stroke2: #62996c;
	--wpds-color-private-success-stroke3: #008030;
	--wpds-color-private-success-stroke4: #006113;
	--wpds-color-private-success-surface1: #ddf8e0;
	--wpds-color-private-success-surface2: #f0fcf2;
	--wpds-color-private-success-surface3: #fff;
	--wpds-color-private-success-surface4: #cdf5d3;
	--wpds-color-private-success-surface5: #acf0b7;
	--wpds-color-private-success-surface6: #7be792;
	--wpds-color-private-warning-bg-fill-dark: #201e1b;
	--wpds-color-private-warning-bg-fill-inverted1: #522100;
	--wpds-color-private-warning-bg-fill-inverted2: #201e1b;
	--wpds-color-private-warning-bg-fill1: #f09f49;
	--wpds-color-private-warning-bg-fill2: #db8c33;
	--wpds-color-private-warning-fg-fill: #201e1b;
	--wpds-color-private-warning-fg-fill-dark: #f2f0ed;
	--wpds-color-private-warning-fg-fill-inverted: #f2f0ed;
	--wpds-color-private-warning-fg-surface1: #e89841;
	--wpds-color-private-warning-fg-surface2: #c57713;
	--wpds-color-private-warning-fg-surface3: #a55a00;
	--wpds-color-private-warning-fg-surface4: #361200;
	--wpds-color-private-warning-stroke1: #cfa278;
	--wpds-color-private-warning-stroke2: #aa8562;
	--wpds-color-private-warning-stroke3: #a55a00;
	--wpds-color-private-warning-stroke4: #823d00;
	--wpds-color-private-warning-surface1: #faeee3;
	--wpds-color-private-warning-surface2: #fdf7f2;
	--wpds-color-private-warning-surface3: #fff;
	--wpds-color-private-warning-surface4: #f9e7d8;
	--wpds-color-private-warning-surface5: #f5dbc3;
	--wpds-color-private-warning-surface6: #f1c9a4;
	--wpds-color-stroke-focus-brand: var(--wpds-color-private-primary-stroke3); /* Accessible stroke color applied to focus rings. */
	--wpds-color-stroke-interactive-brand: var(--wpds-color-private-primary-stroke3); /* Accessible stroke color used for interactive brand-toned elements with normal emphasis. */
	--wpds-color-stroke-interactive-brand-active: var(--wpds-color-private-primary-stroke4); /* Accessible stroke color used for interactive brand-toned elements with normal emphasis that are hovered, focused, or active. */
	--wpds-color-stroke-interactive-brand-disabled: var(--wpds-color-private-bg-stroke2); /* Accessible stroke color used for interactive brand-toned elements with normal emphasis, in their disabled state. */
	--wpds-color-stroke-interactive-error-strong: var(--wpds-color-private-error-stroke3); /* Accessible stroke color used for interactive error-toned elements with strong emphasis. */
	--wpds-color-stroke-interactive-neutral: var(--wpds-color-private-bg-stroke3); /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis. */
	--wpds-color-stroke-interactive-neutral-active: var(--wpds-color-private-bg-stroke4); /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis that are hovered, focused, or active. */
	--wpds-color-stroke-interactive-neutral-disabled: var(--wpds-color-private-bg-stroke2); /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis, in their disabled state. */
	--wpds-color-stroke-interactive-neutral-strong: var(--wpds-color-private-bg-stroke4); /* Accessible stroke color used for interactive neutrally-toned elements with strong emphasis. */
	--wpds-color-stroke-surface-brand: var(--wpds-color-private-primary-stroke1); /* Decorative stroke color used to define brand-toned surface boundaries with normal emphasis. */
	--wpds-color-stroke-surface-brand-strong: var(--wpds-color-private-primary-stroke3); /* Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. */
	--wpds-color-stroke-surface-error: var(--wpds-color-private-error-stroke1); /* Decorative stroke color used to define error-toned surface boundaries with normal emphasis. */
	--wpds-color-stroke-surface-error-strong: var(--wpds-color-private-error-stroke3); /* Decorative stroke color used to define error-toned surface boundaries with strong emphasis. */
	--wpds-color-stroke-surface-info: var(--wpds-color-private-info-stroke1); /* Decorative stroke color used to define info-toned surface boundaries with normal emphasis. */
	--wpds-color-stroke-surface-info-strong: var(--wpds-color-private-info-stroke3); /* Decorative stroke color used to define info-toned surface boundaries with strong emphasis. */
	--wpds-color-stroke-surface-neutral: var(--wpds-color-private-bg-stroke2); /* Decorative stroke color used to define neutrally-toned surface boundaries with normal emphasis. */
	--wpds-color-stroke-surface-neutral-strong: var(--wpds-color-private-bg-stroke3); /* Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. */
	--wpds-color-stroke-surface-neutral-weak: var(--wpds-color-private-bg-stroke1); /* Decorative stroke color used to define neutrally-toned surface boundaries with weak emphasis. */
	--wpds-color-stroke-surface-success: var(--wpds-color-private-success-stroke1); /* Decorative stroke color used to define success-toned surface boundaries with normal emphasis. */
	--wpds-color-stroke-surface-success-strong: var(--wpds-color-private-success-stroke3); /* Decorative stroke color used to define success-toned surface boundaries with strong emphasis. */
	--wpds-color-stroke-surface-warning: var(--wpds-color-private-warning-stroke1); /* Decorative stroke color used to define warning-toned surface boundaries with normal emphasis. */
	--wpds-color-stroke-surface-warning-strong: var(--wpds-color-private-warning-stroke3); /* Decorative stroke color used to define warning-toned surface boundaries with strong emphasis. */
	--wpds-elevation-large:
		0 5px 15px 0 #00000014,
		0 15px 27px 0 #00000012,
		0 30px 36px 0 #0000000a,
		0 50px 43px 0 #00000005; /* For components that confirm decisions or handle necessary interruptions. Example: Modals. */
	--wpds-elevation-medium:
		0 2px 3px 0 #0000000d,
		0 4px 5px 0 #0000000a,
		0 12px 12px 0 #00000008,
		0 16px 16px 0 #00000005; /* For components that offer additional actions. Example: Menus, Command Palette */
	--wpds-elevation-small:
		0 1px 2px 0 #0000000d,
		0 2px 3px 0 #0000000a,
		0 6px 6px 0 #00000008,
		0 8px 8px 0 #00000005; /* For components that provide contextual feedback without being intrusive. Generally non-interruptive. Example: Tooltips, Snackbar. */
	--wpds-elevation-x-small:
		0 1px 1px 0 #00000008,
		0 1px 2px 0 #00000005,
		0 3px 3px 0 #00000005,
		0 4px 4px 0 #00000003; /* For sections and containers that group related content and controls, which may overlap other content. Example: Preview Frame. */
	--wpds-font-family-body:
		-apple-system,
		system-ui,
		"Segoe UI",
		"Roboto",
		"Oxygen-Sans",
		"Ubuntu",
		"Cantarell",
		"Helvetica Neue",
		sans-serif; /* Body font family */
	--wpds-font-family-heading:
		-apple-system,
		system-ui,
		"Segoe UI",
		"Roboto",
		"Oxygen-Sans",
		"Ubuntu",
		"Cantarell",
		"Helvetica Neue",
		sans-serif; /* Headings font family */
	--wpds-font-family-mono: "Menlo", "Consolas", monaco, monospace; /* Monospace font family */
	--wpds-font-line-height-2x-large: 40px; /* 2X large line height */
	--wpds-font-line-height-large: 28px; /* Large line height */
	--wpds-font-line-height-medium: 24px; /* Medium line height */
	--wpds-font-line-height-small: 20px; /* Small line height */
	--wpds-font-line-height-x-large: 32px; /* Extra large line height */
	--wpds-font-line-height-x-small: 16px; /* Extra small line height */
	--wpds-font-size-2x-large: 32px; /* 2X large font size */
	--wpds-font-size-large: 15px; /* Large font size */
	--wpds-font-size-medium: 13px; /* Medium font size */
	--wpds-font-size-small: 12px; /* Small font size */
	--wpds-font-size-x-large: 20px; /* Extra large font size */
	--wpds-font-size-x-small: 11px; /* Extra small font size */
	--wpds-spacing-05: 4px; /* Extra small spacing */
	--wpds-spacing-10: 8px; /* Small spacing */
	--wpds-spacing-15: 12px; /* Medium spacing */
	--wpds-spacing-20: 16px; /* Large spacing */
	--wpds-spacing-30: 24px; /* Extra large spacing */
	--wpds-spacing-40: 32px; /* 2X large spacing */
	--wpds-spacing-50: 40px; /* 3X large spacing */
	--wpds-spacing-60: 48px; /* 4X large spacing */
	--wpds-spacing-70: 56px; /* 5X large spacing */
	--wpds-spacing-80: 64px; /* 6X large spacing */
}

@media ( -webkit-min-device-pixel-ratio: 2 ), ( min-resolution: 192dpi ) {

	:root {
		--wpds-border-width-focus: 1.5px; /* Border width for focus ring */
	}
}
