@charset "UTF-8";
/**
 * WordPress Design System theme styles.
 * This exports the design tokens (CSS custom properties) for use across WordPress packages.
 */
/* -------------------------------------------
 *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
 * ------------------------------------------- */
:root {
  --wpds-border-radius-lg: 8px; /* Large radius */
  --wpds-border-radius-md: 4px; /* Medium radius */
  --wpds-border-radius-sm: 2px; /* Small radius */
  --wpds-border-radius-xs: 1px; /* Extra small radius */
  --wpds-border-width-focus: 2px; /* Border width for focus ring */
  --wpds-border-width-lg: 8px; /* Large width */
  --wpds-border-width-md: 4px; /* Medium width */
  --wpds-border-width-sm: 2px; /* Small width */
  --wpds-border-width-xs: 1px; /* Extra small width */
  --wpds-color-bg-interactive-brand-strong: #3858e9; /* Background color for interactive elements with brand tone and strong emphasis. */
  --wpds-color-bg-interactive-brand-strong-active: #2e49d9; /* Background color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */
  --wpds-color-bg-interactive-brand-weak: #00000000; /* Background color for interactive elements with brand tone and weak emphasis. */
  --wpds-color-bg-interactive-brand-weak-active: #e6eaf4; /* Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active. */
  --wpds-color-bg-interactive-error: #00000000; /* Background color for interactive elements with error tone and normal emphasis. */
  --wpds-color-bg-interactive-error-active: #fff6f4; /* Background color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. */
  --wpds-color-bg-interactive-error-strong: #cc1818; /* Background color for interactive elements with error tone and strong emphasis. */
  --wpds-color-bg-interactive-error-strong-active: #b90000; /* Background color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. */
  --wpds-color-bg-interactive-error-weak: #00000000; /* Background color for interactive elements with error tone and weak emphasis. */
  --wpds-color-bg-interactive-error-weak-active: #f6e6e3; /* Background color for interactive elements with error tone and weak emphasis that are hovered, focused, or active. */
  --wpds-color-bg-interactive-neutral-strong: #2d2d2d; /* Background color for interactive elements with neutral tone and strong emphasis. */
  --wpds-color-bg-interactive-neutral-strong-active: #1e1e1e; /* Background color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active. */
  --wpds-color-bg-interactive-neutral-strong-disabled: #e2e2e2; /* Background color for interactive elements with neutral tone and strong emphasis, in their disabled state. */
  --wpds-color-bg-interactive-neutral-weak: #00000000; /* Background color for interactive elements with neutral tone and weak emphasis. */
  --wpds-color-bg-interactive-neutral-weak-active: #eaeaea; /* Background color for interactive elements with neutral tone and weak emphasis that are hovered, focused, or active. */
  --wpds-color-bg-interactive-neutral-weak-disabled: #00000000; /* Background color for interactive elements with weak emphasis, in their disabled state, regardless of the tone. */
  --wpds-color-bg-surface-brand: #ecf0f9; /* Background color for surfaces with brand tone and normal emphasis. */
  --wpds-color-bg-surface-caution: #fee994; /* Background color for surfaces with caution tone and normal emphasis. */
  --wpds-color-bg-surface-caution-weak: #fff9c9; /* Background color for surfaces with caution tone and weak emphasis. */
  --wpds-color-bg-surface-error: #f6e6e3; /* Background color for surfaces with error tone and normal emphasis. */
  --wpds-color-bg-surface-error-weak: #fff6f4; /* Background color for surfaces with error tone and weak emphasis. */
  --wpds-color-bg-surface-info: #deebfa; /* Background color for surfaces with info tone and normal emphasis. */
  --wpds-color-bg-surface-info-weak: #f2f9ff; /* Background color for surfaces with info tone and weak emphasis. */
  --wpds-color-bg-surface-neutral: #f8f8f8; /* Background color for surfaces with normal emphasis. */
  --wpds-color-bg-surface-neutral-strong: #ffffff; /* Background color for surfaces with strong emphasis. */
  --wpds-color-bg-surface-neutral-weak: #f0f0f0; /* Background color for surfaces with weak emphasis. */
  --wpds-color-bg-surface-success: #c5f7cc; /* Background color for surfaces with success tone and normal emphasis. */
  --wpds-color-bg-surface-success-weak: #eaffed; /* Background color for surfaces with success tone and weak emphasis. */
  --wpds-color-bg-surface-warning: #fde6bd; /* Background color for surfaces with warning tone and normal emphasis. */
  --wpds-color-bg-surface-warning-weak: #fff7e0; /* Background color for surfaces with warning tone and weak emphasis. */
  --wpds-color-bg-thumb-brand: #3858e9; /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track). */
  --wpds-color-bg-thumb-brand-active: #3858e9; /* 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-neutral-disabled: #d8d8d8; /* Background color for thumbs with normal emphasis (eg. slider thumb and filled track), in their disabled state, regardless of the tone. */
  --wpds-color-bg-thumb-neutral-weak: #8a8a8a; /* Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb). */
  --wpds-color-bg-thumb-neutral-weak-active: #6c6c6c; /* 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: #d8d8d8; /* Background color for tracks with a neutral tone and normal emphasis (eg. slider or progressbar track). */
  --wpds-color-bg-track-neutral-weak: #e0e0e0; /* Background color for tracks with a neutral tone and weak emphasis (eg. scrollbar track). */
  --wpds-color-fg-content-caution: #281d00; /* Foreground color for content like text with caution tone and normal emphasis. */
  --wpds-color-fg-content-caution-weak: #826a00; /* Foreground color for content like text with caution tone and weak emphasis. */
  --wpds-color-fg-content-error: #470000; /* Foreground color for content like text with error tone and normal emphasis. */
  --wpds-color-fg-content-error-weak: #cc1818; /* Foreground color for content like text with error tone and weak emphasis. */
  --wpds-color-fg-content-info: #001b4f; /* Foreground color for content like text with info tone and normal emphasis. */
  --wpds-color-fg-content-info-weak: #006bd7; /* Foreground color for content like text with info tone and weak emphasis. */
  --wpds-color-fg-content-neutral: #1e1e1e; /* Foreground color for content like text with normal emphasis. */
  --wpds-color-fg-content-neutral-weak: #6d6d6d; /* Foreground color for content like text with weak emphasis. */
  --wpds-color-fg-content-success: #002900; /* Foreground color for content like text with success tone and normal emphasis. */
  --wpds-color-fg-content-success-weak: #007f30; /* Foreground color for content like text with success tone and weak emphasis. */
  --wpds-color-fg-content-warning: #2e1900; /* Foreground color for content like text with warning tone and normal emphasis. */
  --wpds-color-fg-content-warning-weak: #926300; /* Foreground color for content like text with warning tone and weak emphasis. */
  --wpds-color-fg-interactive-brand: #3858e9; /* Foreground color for interactive elements with brand tone and normal emphasis. */
  --wpds-color-fg-interactive-brand-active: #3858e9; /* Foreground color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. */
  --wpds-color-fg-interactive-brand-strong: #eff0f2; /* Foreground color for interactive elements with brand tone and strong emphasis. */
  --wpds-color-fg-interactive-brand-strong-active: #eff0f2; /* Foreground color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */
  --wpds-color-fg-interactive-error: #cc1818; /* Foreground color for interactive elements with error tone and normal emphasis. */
  --wpds-color-fg-interactive-error-active: #cc1818; /* Foreground color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. */
  --wpds-color-fg-interactive-error-strong: #f2efef; /* Foreground color for interactive elements with error tone and strong emphasis. */
  --wpds-color-fg-interactive-error-strong-active: #f2efef; /* Foreground color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. */
  --wpds-color-fg-interactive-neutral: #1e1e1e; /* Foreground color for interactive elements with neutral tone and normal emphasis. */
  --wpds-color-fg-interactive-neutral-active: #1e1e1e; /* Foreground color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. */
  --wpds-color-fg-interactive-neutral-disabled: #8a8a8a; /* Foreground color for interactive elements with normal emphasis, in their disabled state, regardless of the tone. */
  --wpds-color-fg-interactive-neutral-strong: #f0f0f0; /* Foreground color for interactive elements with neutral tone and strong emphasis. */
  --wpds-color-fg-interactive-neutral-strong-active: #f0f0f0; /* Foreground color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active. */
  --wpds-color-fg-interactive-neutral-strong-disabled: #8a8a8a; /* Foreground color for interactive elements with strong emphasis, in their disabled state, regardless of the tone. */
  --wpds-color-fg-interactive-neutral-weak: #6d6d6d; /* Foreground color for interactive elements with neutral tone and weak emphasis. */
  --wpds-color-fg-interactive-neutral-weak-disabled: #8a8a8a; /* Foreground color for interactive elements with weak emphasis, in their disabled state, regardless of the tone. */
  --wpds-color-stroke-focus-brand: #3858e9; /* Accessible stroke color applied to focus rings. */
  --wpds-color-stroke-interactive-brand: #3858e9; /* Accessible stroke color used for interactive brand-toned elements with normal emphasis. */
  --wpds-color-stroke-interactive-brand-active: #2337c8; /* Accessible stroke color used for interactive brand-toned elements with normal emphasis that are hovered, focused, or active. */
  --wpds-color-stroke-interactive-error: #cc1818; /* Accessible stroke color used for interactive error-toned elements with normal emphasis. */
  --wpds-color-stroke-interactive-error-active: #9d0000; /* Accessible stroke color used for interactive error-toned elements with normal emphasis that are hovered, focused, or active. */
  --wpds-color-stroke-interactive-error-strong: #cc1818; /* Accessible stroke color used for interactive error-toned elements with strong emphasis. */
  --wpds-color-stroke-interactive-neutral: #8a8a8a; /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis. */
  --wpds-color-stroke-interactive-neutral-active: #6c6c6c; /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis that are hovered, focused, or active. */
  --wpds-color-stroke-interactive-neutral-disabled: #d8d8d8; /* Accessible stroke color used for interactive elements with normal emphasis, in their disabled state, regardless of the tone. */
  --wpds-color-stroke-interactive-neutral-strong: #6c6c6c; /* Accessible stroke color used for interactive neutrally-toned elements with strong emphasis. */
  --wpds-color-stroke-surface-brand: #a3b1d4; /* Decorative stroke color used to define brand-toned surface boundaries with normal emphasis. */
  --wpds-color-stroke-surface-brand-strong: #3858e9; /* Decorative stroke color used to define brand-toned surface boundaries with strong emphasis. */
  --wpds-color-stroke-surface-error: #daa39b; /* Decorative stroke color used to define error-toned surface boundaries with normal emphasis. */
  --wpds-color-stroke-surface-error-strong: #cc1818; /* Decorative stroke color used to define error-toned surface boundaries with strong emphasis. */
  --wpds-color-stroke-surface-info: #9fbcdc; /* Decorative stroke color used to define info-toned surface boundaries with normal emphasis. */
  --wpds-color-stroke-surface-info-strong: #006bd7; /* Decorative stroke color used to define info-toned surface boundaries with strong emphasis. */
  --wpds-color-stroke-surface-neutral: #d8d8d8; /* Decorative stroke color used to define neutrally-toned surface boundaries with normal emphasis. */
  --wpds-color-stroke-surface-neutral-strong: #8a8a8a; /* Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. */
  --wpds-color-stroke-surface-neutral-weak: #e0e0e0; /* Decorative stroke color used to define neutrally-toned surface boundaries with weak emphasis. */
  --wpds-color-stroke-surface-success: #8ac894; /* Decorative stroke color used to define success-toned surface boundaries with normal emphasis. */
  --wpds-color-stroke-surface-success-strong: #007f30; /* Decorative stroke color used to define success-toned surface boundaries with strong emphasis. */
  --wpds-color-stroke-surface-warning: #d0b381; /* Decorative stroke color used to define warning-toned surface boundaries with normal emphasis. */
  --wpds-color-stroke-surface-warning-strong: #926300; /* Decorative stroke color used to define warning-toned surface boundaries with strong emphasis. */
  --wpds-dimension-base: 4px; /* Base dimension unit */
  --wpds-dimension-gap-2xl: 32px; /* 2x extra large gap */
  --wpds-dimension-gap-3xl: 40px; /* 3x extra large gap */
  --wpds-dimension-gap-lg: 16px; /* Large gap */
  --wpds-dimension-gap-md: 12px; /* Medium gap */
  --wpds-dimension-gap-sm: 8px; /* Small gap */
  --wpds-dimension-gap-xl: 24px; /* Extra large gap */
  --wpds-dimension-gap-xs: 4px; /* Extra small gap */
  --wpds-dimension-padding-2xl: 24px; /* 2x extra large padding */
  --wpds-dimension-padding-3xl: 32px; /* 3x extra large padding */
  --wpds-dimension-padding-lg: 16px; /* Large padding */
  --wpds-dimension-padding-md: 12px; /* Medium padding */
  --wpds-dimension-padding-sm: 8px; /* Small padding */
  --wpds-dimension-padding-xl: 20px; /* Extra large padding */
  --wpds-dimension-padding-xs: 4px; /* Extra small padding */
  --wpds-elevation-lg: 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-md: 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-sm: 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-xs: 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-2xl: 40px; /* 2X large line height */
  --wpds-font-line-height-lg: 28px; /* Large line height */
  --wpds-font-line-height-md: 24px; /* Medium line height */
  --wpds-font-line-height-sm: 20px; /* Small line height */
  --wpds-font-line-height-xl: 32px; /* Extra large line height */
  --wpds-font-line-height-xs: 16px; /* Extra small line height */
  --wpds-font-size-2xl: 32px; /* 2X large font size */
  --wpds-font-size-lg: 15px; /* Large font size */
  --wpds-font-size-md: 13px; /* Medium font size */
  --wpds-font-size-sm: 12px; /* Small font size */
  --wpds-font-size-xl: 20px; /* Extra large font size */
  --wpds-font-size-xs: 11px; /* Extra small font size */
  --wpds-font-weight-medium: 499; /* Medium font weight for emphasis and headings */
  --wpds-font-weight-regular: 400; /* Regular font weight for body text */
}

[data-wpds-theme-provider-id][data-wpds-density=compact] {
  --wpds-dimension-gap-2xl: 24px; /* 2x extra large gap */
  --wpds-dimension-gap-3xl: 32px; /* 3x extra large gap */
  --wpds-dimension-gap-lg: 12px; /* Large gap */
  --wpds-dimension-gap-md: 8px; /* Medium gap */
  --wpds-dimension-gap-sm: 4px; /* Small gap */
  --wpds-dimension-gap-xl: 20px; /* Extra large gap */
  --wpds-dimension-gap-xs: 4px; /* Extra small gap */
  --wpds-dimension-padding-2xl: 20px; /* 2x extra large padding */
  --wpds-dimension-padding-3xl: 24px; /* 3x extra large padding */
  --wpds-dimension-padding-lg: 12px; /* Large padding */
  --wpds-dimension-padding-md: 8px; /* Medium padding */
  --wpds-dimension-padding-sm: 4px; /* Small padding */
  --wpds-dimension-padding-xl: 16px; /* Extra large padding */
  --wpds-dimension-padding-xs: 4px; /* Extra small padding */
}

[data-wpds-theme-provider-id][data-wpds-density=comfortable] {
  --wpds-dimension-gap-2xl: 40px; /* 2x extra large gap */
  --wpds-dimension-gap-3xl: 48px; /* 3x extra large gap */
  --wpds-dimension-gap-lg: 20px; /* Large gap */
  --wpds-dimension-gap-md: 16px; /* Medium gap */
  --wpds-dimension-gap-sm: 12px; /* Small gap */
  --wpds-dimension-gap-xl: 32px; /* Extra large gap */
  --wpds-dimension-gap-xs: 8px; /* Extra small gap */
  --wpds-dimension-padding-2xl: 32px; /* 2x extra large padding */
  --wpds-dimension-padding-3xl: 40px; /* 3x extra large padding */
  --wpds-dimension-padding-lg: 20px; /* Large padding */
  --wpds-dimension-padding-md: 16px; /* Medium padding */
  --wpds-dimension-padding-sm: 12px; /* Small padding */
  --wpds-dimension-padding-xl: 24px; /* Extra large padding */
  --wpds-dimension-padding-xs: 8px; /* Extra small padding */
}

[data-wpds-theme-provider-id][data-wpds-density=default] {
  --wpds-dimension-base: 4px; /* Base dimension unit */
  --wpds-dimension-gap-2xl: 32px; /* 2x extra large gap */
  --wpds-dimension-gap-3xl: 40px; /* 3x extra large gap */
  --wpds-dimension-gap-lg: 16px; /* Large gap */
  --wpds-dimension-gap-md: 12px; /* Medium gap */
  --wpds-dimension-gap-sm: 8px; /* Small gap */
  --wpds-dimension-gap-xl: 24px; /* Extra large gap */
  --wpds-dimension-gap-xs: 4px; /* Extra small gap */
  --wpds-dimension-padding-2xl: 24px; /* 2x extra large padding */
  --wpds-dimension-padding-3xl: 32px; /* 3x extra large padding */
  --wpds-dimension-padding-lg: 16px; /* Large padding */
  --wpds-dimension-padding-md: 12px; /* Medium padding */
  --wpds-dimension-padding-sm: 8px; /* Small padding */
  --wpds-dimension-padding-xl: 20px; /* Extra large padding */
  --wpds-dimension-padding-xs: 4px; /* Extra small padding */
}

@media (min-resolution: 192dpi) {
  :root {
    --wpds-border-width-focus: 1.5px; /* Border width for focus ring */
  }
}