[Summary view] [Print] [Text view]

   1  @charset "UTF-8";
   2  /* -------------------------------------------
   3   *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
   4   * ------------------------------------------- */
   5  :root {
   6    /* Buttons and other elements nested inside controls. */
   7    --wpds-border-radius-xs: 1px;
   8    /* Standalone buttons, inputs, and compact controls. */
   9    --wpds-border-radius-sm: 2px;
  10    /* Menus, popovers, and other small portaled overlays. */
  11    --wpds-border-radius-md: 4px;
  12    /* Cards, dialogs, notices, and other larger content containers. */
  13    --wpds-border-radius-lg: 8px;
  14    /* Page and app shell surfaces. */
  15    --wpds-border-radius-xl: 12px;
  16    /* Extra small width */
  17    --wpds-border-width-xs: 1px;
  18    /* Small width */
  19    --wpds-border-width-sm: 2px;
  20    /* Medium width */
  21    --wpds-border-width-md: 4px;
  22    /* Large width */
  23    --wpds-border-width-lg: 8px;
  24    /* Border width for focus ring */
  25    --wpds-border-width-focus: 2px;
  26    /* Background color for surfaces with normal emphasis. */
  27    --wpds-color-background-surface-neutral: #fcfcfc;
  28    /* Background color for surfaces with strong emphasis. */
  29    --wpds-color-background-surface-neutral-strong: #fff;
  30    /* Background color for surfaces with weak emphasis. */
  31    --wpds-color-background-surface-neutral-weak: #f4f4f4;
  32    /* Background color for surfaces with brand tone and normal emphasis. */
  33    --wpds-color-background-surface-brand: #ecf0fa;
  34    /* Background color for surfaces with success tone and normal emphasis. */
  35    --wpds-color-background-surface-success: #c6f7cd;
  36    /* Background color for surfaces with success tone and weak emphasis. */
  37    --wpds-color-background-surface-success-weak: #ebffed;
  38    /* Background color for surfaces with info tone and normal emphasis. */
  39    --wpds-color-background-surface-info: #deebfa;
  40    /* Background color for surfaces with info tone and weak emphasis. */
  41    --wpds-color-background-surface-info-weak: #f3f9ff;
  42    /* Background color for surfaces with warning tone and normal emphasis. */
  43    --wpds-color-background-surface-warning: #fde6be;
  44    /* Background color for surfaces with warning tone and weak emphasis. */
  45    --wpds-color-background-surface-warning-weak: #fff7e1;
  46    /* Background color for surfaces with caution tone and normal emphasis. */
  47    --wpds-color-background-surface-caution: #fee995;
  48    /* Background color for surfaces with caution tone and weak emphasis. */
  49    --wpds-color-background-surface-caution-weak: #fff9ca;
  50    /* Background color for surfaces with error tone and normal emphasis. */
  51    --wpds-color-background-surface-error: #f6e6e3;
  52    /* Background color for surfaces with error tone and weak emphasis. */
  53    --wpds-color-background-surface-error-weak: #fff6f5;
  54    /* Background color for interactive elements with neutral tone and strong emphasis. */
  55    --wpds-color-background-interactive-neutral-strong: #2d2d2d;
  56    /* Background color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active. */
  57    --wpds-color-background-interactive-neutral-strong-active: #1e1e1e;
  58    /* Background color for interactive elements with neutral tone and strong emphasis, in their disabled state. */
  59    --wpds-color-background-interactive-neutral-strong-disabled: #e6e6e6;
  60    /* Background color for interactive elements with neutral tone and weak emphasis. */
  61    --wpds-color-background-interactive-neutral-weak: #0000;
  62    /* Background color for interactive elements with neutral tone and weak emphasis that are hovered, focused, or active. */
  63    --wpds-color-background-interactive-neutral-weak-active: #ededed;
  64    /* Background color for interactive elements with neutral tone and weak emphasis, in their disabled state. */
  65    --wpds-color-background-interactive-neutral-weak-disabled: #0000;
  66    /* Background color for interactive elements with brand tone and strong emphasis. */
  67    --wpds-color-background-interactive-brand-strong: #3858e9;
  68    /* Background color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */
  69    --wpds-color-background-interactive-brand-strong-active: #2e49d9;
  70    /* Background color for interactive elements with brand tone and strong emphasis, in their disabled state. */
  71    --wpds-color-background-interactive-brand-strong-disabled: #e6e6e6;
  72    /* Background color for interactive elements with brand tone and weak emphasis. */
  73    --wpds-color-background-interactive-brand-weak: #0000;
  74    /* Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active. */
  75    --wpds-color-background-interactive-brand-weak-active: #e6eaf4;
  76    /* Background color for interactive elements with brand tone and weak emphasis, in their disabled state. */
  77    --wpds-color-background-interactive-brand-weak-disabled: #0000;
  78    /* Background color for interactive elements with error tone and normal emphasis. */
  79    --wpds-color-background-interactive-error: #0000;
  80    /* Background color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. */
  81    --wpds-color-background-interactive-error-active: #fff6f5;
  82    /* Background color for interactive elements with error tone and normal emphasis, in their disabled state. */
  83    --wpds-color-background-interactive-error-disabled: #0000;
  84    /* Background color for interactive elements with error tone and strong emphasis. */
  85    --wpds-color-background-interactive-error-strong: #cc1818;
  86    /* Background color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. */
  87    --wpds-color-background-interactive-error-strong-active: #b90000;
  88    /* Background color for interactive elements with error tone and strong emphasis, in their disabled state. */
  89    --wpds-color-background-interactive-error-strong-disabled: #e6e6e6;
  90    /* Background color for interactive elements with error tone and weak emphasis. */
  91    --wpds-color-background-interactive-error-weak: #0000;
  92    /* Background color for interactive elements with error tone and weak emphasis that are hovered, focused, or active. */
  93    --wpds-color-background-interactive-error-weak-active: #f6e6e3;
  94    /* Background color for interactive elements with error tone and weak emphasis, in their disabled state. */
  95    --wpds-color-background-interactive-error-weak-disabled: #0000;
  96    /* Background color for tracks with a neutral tone and weak emphasis (eg. scrollbar track). */
  97    --wpds-color-background-track-neutral-weak: #f0f0f0;
  98    /* Background color for tracks with a neutral tone and normal emphasis (eg. slider or progressbar track). */
  99    --wpds-color-background-track-neutral: #dbdbdb;
 100    /* Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb). */
 101    --wpds-color-background-thumb-neutral-weak: #8d8d8d;
 102    /* Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb) that are hovered, focused, or active. */
 103    --wpds-color-background-thumb-neutral-weak-active: #6e6e6e;
 104    /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track). */
 105    --wpds-color-background-thumb-brand: #3858e9;
 106    /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track) that are hovered, focused, or active. */
 107    --wpds-color-background-thumb-brand-active: #3858e9;
 108    /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track), in their disabled state. */
 109    --wpds-color-background-thumb-brand-disabled: #dbdbdb;
 110    /* Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb), in their disabled state. */
 111    --wpds-color-background-thumb-neutral-weak-disabled: #dbdbdb;
 112    /* Foreground color for content like text with normal emphasis. */
 113    --wpds-color-foreground-content-neutral: #1e1e1e;
 114    /* Foreground color for content like text with weak emphasis. */
 115    --wpds-color-foreground-content-neutral-weak: #707070;
 116    /* Foreground color for content like text with success tone and normal emphasis. */
 117    --wpds-color-foreground-content-success: #002900;
 118    /* Foreground color for content like text with success tone and weak emphasis. */
 119    --wpds-color-foreground-content-success-weak: #008030;
 120    /* Foreground color for content like text with info tone and normal emphasis. */
 121    --wpds-color-foreground-content-info: #001b4f;
 122    /* Foreground color for content like text with info tone and weak emphasis. */
 123    --wpds-color-foreground-content-info-weak: #006bd7;
 124    /* Foreground color for content like text with warning tone and normal emphasis. */
 125    --wpds-color-foreground-content-warning: #2e1900;
 126    /* Foreground color for content like text with warning tone and weak emphasis. */
 127    --wpds-color-foreground-content-warning-weak: #926300;
 128    /* Foreground color for content like text with caution tone and normal emphasis. */
 129    --wpds-color-foreground-content-caution: #281d00;
 130    /* Foreground color for content like text with caution tone and weak emphasis. */
 131    --wpds-color-foreground-content-caution-weak: #826a00;
 132    /* Foreground color for content like text with error tone and normal emphasis. */
 133    --wpds-color-foreground-content-error: #470000;
 134    /* Foreground color for content like text with error tone and weak emphasis. */
 135    --wpds-color-foreground-content-error-weak: #cc1818;
 136    /* Foreground color for interactive elements with neutral tone and normal emphasis. */
 137    --wpds-color-foreground-interactive-neutral: #1e1e1e;
 138    /* Foreground color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. */
 139    --wpds-color-foreground-interactive-neutral-active: #1e1e1e;
 140    /* Foreground color for interactive elements with neutral tone and normal emphasis, in their disabled state. */
 141    --wpds-color-foreground-interactive-neutral-disabled: #8d8d8d;
 142    /* Foreground color for interactive elements with neutral tone and strong emphasis. */
 143    --wpds-color-foreground-interactive-neutral-strong: #f0f0f0;
 144    /* Foreground color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active. */
 145    --wpds-color-foreground-interactive-neutral-strong-active: #f0f0f0;
 146    /* Foreground color for interactive elements with neutral tone and strong emphasis, in their disabled state. */
 147    --wpds-color-foreground-interactive-neutral-strong-disabled: #8d8d8d;
 148    /* Foreground color for interactive elements with neutral tone and weak emphasis. */
 149    --wpds-color-foreground-interactive-neutral-weak: #707070;
 150    /* Foreground color for interactive elements with neutral tone and weak emphasis that are hovered, focused, or active. */
 151    --wpds-color-foreground-interactive-neutral-weak-active: #1e1e1e;
 152    /* Foreground color for interactive elements with neutral tone and weak emphasis, in their disabled state. */
 153    --wpds-color-foreground-interactive-neutral-weak-disabled: #8d8d8d;
 154    /* Foreground color for interactive elements with brand tone and normal emphasis. */
 155    --wpds-color-foreground-interactive-brand: #3858e9;
 156    /* Foreground color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. */
 157    --wpds-color-foreground-interactive-brand-active: #0b0070;
 158    /* Foreground color for interactive elements with brand tone and normal emphasis, in their disabled state. */
 159    --wpds-color-foreground-interactive-brand-disabled: #8d8d8d;
 160    /* Foreground color for interactive elements with brand tone and strong emphasis. */
 161    --wpds-color-foreground-interactive-brand-strong: #eff0f2;
 162    /* Foreground color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */
 163    --wpds-color-foreground-interactive-brand-strong-active: #eff0f2;
 164    /* Foreground color for interactive elements with brand tone and strong emphasis, in their disabled state. */
 165    --wpds-color-foreground-interactive-brand-strong-disabled: #8d8d8d;
 166    /* Foreground color for interactive elements with error tone and normal emphasis. */
 167    --wpds-color-foreground-interactive-error: #cc1818;
 168    /* Foreground color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. */
 169    --wpds-color-foreground-interactive-error-active: #470000;
 170    /* Foreground color for interactive elements with error tone and normal emphasis, in their disabled state. */
 171    --wpds-color-foreground-interactive-error-disabled: #8d8d8d;
 172    /* Foreground color for interactive elements with error tone and strong emphasis. */
 173    --wpds-color-foreground-interactive-error-strong: #f2efef;
 174    /* Foreground color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. */
 175    --wpds-color-foreground-interactive-error-strong-active: #f2efef;
 176    /* Foreground color for interactive elements with error tone and strong emphasis, in their disabled state. */
 177    --wpds-color-foreground-interactive-error-strong-disabled: #8d8d8d;
 178    /* Decorative stroke color used to define neutrally-toned surface boundaries with normal emphasis. */
 179    --wpds-color-stroke-surface-neutral: #dbdbdb;
 180    /* Decorative stroke color used to define neutrally-toned surface boundaries with weak emphasis. */
 181    --wpds-color-stroke-surface-neutral-weak: #f0f0f0;
 182    /* Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. */
 183    --wpds-color-stroke-surface-neutral-strong: #8d8d8d;
 184    /* Decorative stroke color used to define brand-toned surface boundaries with normal emphasis. */
 185    --wpds-color-stroke-surface-brand: #b0bbd6;
 186    /* Decorative stroke color used to define brand-toned surface boundaries with strong emphasis. */
 187    --wpds-color-stroke-surface-brand-strong: #3858e9;
 188    /* Decorative stroke color used to define success-toned surface boundaries with normal emphasis. */
 189    --wpds-color-stroke-surface-success: #94d29e;
 190    /* Decorative stroke color used to define success-toned surface boundaries with strong emphasis. */
 191    --wpds-color-stroke-surface-success-strong: #008030;
 192    /* Decorative stroke color used to define info-toned surface boundaries with normal emphasis. */
 193    --wpds-color-stroke-surface-info: #a9c6e7;
 194    /* Decorative stroke color used to define info-toned surface boundaries with strong emphasis. */
 195    --wpds-color-stroke-surface-info-strong: #006bd7;
 196    /* Decorative stroke color used to define warning-toned surface boundaries with normal emphasis. */
 197    --wpds-color-stroke-surface-warning: #e1bc7c;
 198    /* Decorative stroke color used to define warning-toned surface boundaries with strong emphasis. */
 199    --wpds-color-stroke-surface-warning-strong: #926300;
 200    /* Decorative stroke color used to define caution-toned surface boundaries with normal emphasis. */
 201    --wpds-color-stroke-surface-caution: #cfc28d;
 202    /* Decorative stroke color used to define caution-toned surface boundaries with strong emphasis. */
 203    --wpds-color-stroke-surface-caution-strong: #826a00;
 204    /* Decorative stroke color used to define error-toned surface boundaries with normal emphasis. */
 205    --wpds-color-stroke-surface-error: #dab1aa;
 206    /* Decorative stroke color used to define error-toned surface boundaries with strong emphasis. */
 207    --wpds-color-stroke-surface-error-strong: #cc1818;
 208    /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis. */
 209    --wpds-color-stroke-interactive-neutral: #8d8d8d;
 210    /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis that are hovered, focused, or active. */
 211    --wpds-color-stroke-interactive-neutral-active: #6e6e6e;
 212    /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis, in their disabled state. */
 213    --wpds-color-stroke-interactive-neutral-disabled: #dbdbdb;
 214    /* Accessible stroke color used for interactive neutrally-toned elements with strong emphasis. */
 215    --wpds-color-stroke-interactive-neutral-strong: #6e6e6e;
 216    /* Accessible stroke color used for interactive brand-toned elements with normal emphasis. */
 217    --wpds-color-stroke-interactive-brand: #3858e9;
 218    /* Accessible stroke color used for interactive brand-toned elements with normal emphasis that are hovered, focused, or active. */
 219    --wpds-color-stroke-interactive-brand-active: #2337c8;
 220    /* Accessible stroke color used for interactive brand-toned elements with normal emphasis, in their disabled state. */
 221    --wpds-color-stroke-interactive-brand-disabled: #dbdbdb;
 222    /* Accessible stroke color used for interactive error-toned elements with normal emphasis. */
 223    --wpds-color-stroke-interactive-error: #cc1818;
 224    /* Accessible stroke color used for interactive error-toned elements with normal emphasis that are hovered, focused, or active. */
 225    --wpds-color-stroke-interactive-error-active: #9d0000;
 226    /* Accessible stroke color used for interactive error-toned elements with normal emphasis, in their disabled state. */
 227    --wpds-color-stroke-interactive-error-disabled: #dbdbdb;
 228    /* Accessible stroke color used for interactive error-toned elements with strong emphasis. */
 229    --wpds-color-stroke-interactive-error-strong: #cc1818;
 230    /* Accessible stroke color applied to focus rings. */
 231    --wpds-color-stroke-focus: #3858e9;
 232    /* Cursor style for interactive controls that are not links (e.g. buttons, checkboxes, and toggles). */
 233    --wpds-cursor-control: pointer;
 234    /* Extra small padding */
 235    --wpds-dimension-padding-xs: 4px;
 236    /* Small padding */
 237    --wpds-dimension-padding-sm: 8px;
 238    /* Medium padding */
 239    --wpds-dimension-padding-md: 12px;
 240    /* Large padding */
 241    --wpds-dimension-padding-lg: 16px;
 242    /* Extra large padding */
 243    --wpds-dimension-padding-xl: 20px;
 244    /* 2x extra large padding */
 245    --wpds-dimension-padding-2xl: 24px;
 246    /* 3x extra large padding */
 247    --wpds-dimension-padding-3xl: 32px;
 248    /* Extra small gap */
 249    --wpds-dimension-gap-xs: 4px;
 250    /* Small gap */
 251    --wpds-dimension-gap-sm: 8px;
 252    /* Medium gap */
 253    --wpds-dimension-gap-md: 12px;
 254    /* Large gap */
 255    --wpds-dimension-gap-lg: 16px;
 256    /* Extra large gap */
 257    --wpds-dimension-gap-xl: 24px;
 258    /* 2x extra large gap */
 259    --wpds-dimension-gap-2xl: 32px;
 260    /* 3x extra large gap */
 261    --wpds-dimension-gap-3xl: 40px;
 262    /* Notification indicators */
 263    --wpds-dimension-size-5xs: 4px;
 264    /* Visual size for small interactive elements like resize handles */
 265    --wpds-dimension-size-4xs: 8px;
 266    /* Small markers */
 267    --wpds-dimension-size-3xs: 12px;
 268    /* For small controls like checkboxes and radios, or small decorative icons */
 269    --wpds-dimension-size-2xs: 16px;
 270    /* For medium sized icons */
 271    --wpds-dimension-size-xs: 20px;
 272    /* For icons and small buttons */
 273    --wpds-dimension-size-sm: 24px;
 274    /* For medium-sized buttons and inputs */
 275    --wpds-dimension-size-md: 32px;
 276    /* Default size for buttons and inputs */
 277    --wpds-dimension-size-lg: 40px;
 278    /* Extra small surface width */
 279    --wpds-dimension-surface-width-xs: 240px;
 280    /* Small surface width */
 281    --wpds-dimension-surface-width-sm: 320px;
 282    /* Medium surface width */
 283    --wpds-dimension-surface-width-md: 400px;
 284    /* Large surface width */
 285    --wpds-dimension-surface-width-lg: 560px;
 286    /* Extra large surface width */
 287    --wpds-dimension-surface-width-xl: 720px;
 288    /* 2x extra large surface width */
 289    --wpds-dimension-surface-width-2xl: 960px;
 290    /* Micro-delays and transition offsets */
 291    --wpds-motion-duration-xs: 50ms;
 292    /* Micro-interactions like focus rings and state changes */
 293    --wpds-motion-duration-sm: 100ms;
 294    /* Standard transitions like menus and popovers */
 295    --wpds-motion-duration-md: 200ms;
 296    /* Deliberate animations like slides and reveals */
 297    --wpds-motion-duration-lg: 300ms;
 298    /* Extended animations like complex or multi-step transitions */
 299    --wpds-motion-duration-xl: 400ms;
 300    /* Nearly imperceptible easing for hover, color, and background transitions */
 301    --wpds-motion-easing-subtle: cubic-bezier( 0.15, 0, 0.15, 1 );
 302    /* General-purpose easing for on-screen movement like resizing, morphing, and layout shifts */
 303    --wpds-motion-easing-balanced: cubic-bezier( 0.4, 0, 0.2, 1 );
 304    /* Noticeable easing for enter/exit and spatial transitions like menus, popovers, dialogs, and drawers */
 305    --wpds-motion-easing-expressive: cubic-bezier( 0.25, 0, 0, 1 );
 306    /* Headings font family */
 307    --wpds-typography-font-family-heading: -apple-system, system-ui, 'Segoe UI',
 308        'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue',
 309        sans-serif;
 310    /* Body font family */
 311    --wpds-typography-font-family-body: -apple-system, system-ui, 'Segoe UI',
 312        'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue',
 313        sans-serif;
 314    /* Monospace font family */
 315    --wpds-typography-font-family-mono: 'Menlo', 'Consolas', monaco, monospace;
 316    /* Extra small font size */
 317    --wpds-typography-font-size-xs: 11px;
 318    /* Small font size */
 319    --wpds-typography-font-size-sm: 12px;
 320    /* Medium font size */
 321    --wpds-typography-font-size-md: 13px;
 322    /* Large font size */
 323    --wpds-typography-font-size-lg: 15px;
 324    /* Extra large font size */
 325    --wpds-typography-font-size-xl: 20px;
 326    /* 2X large font size */
 327    --wpds-typography-font-size-2xl: 32px;
 328    /* Extra small line height */
 329    --wpds-typography-line-height-xs: 16px;
 330    /* Small line height */
 331    --wpds-typography-line-height-sm: 20px;
 332    /* Medium line height */
 333    --wpds-typography-line-height-md: 24px;
 334    /* Large line height */
 335    --wpds-typography-line-height-lg: 28px;
 336    /* Extra large line height */
 337    --wpds-typography-line-height-xl: 32px;
 338    /* 2X large line height */
 339    --wpds-typography-line-height-2xl: 40px;
 340    /* Baseline text weight for body copy and UI text */
 341    --wpds-typography-font-weight-default: 400;
 342    /* Elevated text weight for labels, controls, and headings */
 343    --wpds-typography-font-weight-emphasis: 600;
 344  }
 345  
 346  @media (min-resolution: 192dpi) {
 347    :root {
 348      /* Border width for focus ring */
 349      --wpds-border-width-focus: 1.5px;
 350    }
 351  }
 352  [data-wpds-corner-radius=none],
 353  :root:has([data-wpds-root-provider=true][data-wpds-corner-radius=none]) {
 354    /* Buttons and other elements nested inside controls. */
 355    --wpds-border-radius-xs: 0px;
 356    /* Standalone buttons, inputs, and compact controls. */
 357    --wpds-border-radius-sm: 0px;
 358    /* Menus, popovers, and other small portaled overlays. */
 359    --wpds-border-radius-md: 0px;
 360    /* Cards, dialogs, notices, and other larger content containers. */
 361    --wpds-border-radius-lg: 0px;
 362    /* Page and app shell surfaces. */
 363    --wpds-border-radius-xl: 0px;
 364  }
 365  
 366  [data-wpds-corner-radius=subtle],
 367  :root:has([data-wpds-root-provider=true][data-wpds-corner-radius=subtle]) {
 368    /* Buttons and other elements nested inside controls. */
 369    --wpds-border-radius-xs: 1px;
 370    /* Standalone buttons, inputs, and compact controls. */
 371    --wpds-border-radius-sm: 2px;
 372    /* Menus, popovers, and other small portaled overlays. */
 373    --wpds-border-radius-md: 4px;
 374    /* Cards, dialogs, notices, and other larger content containers. */
 375    --wpds-border-radius-lg: 8px;
 376    /* Page and app shell surfaces. */
 377    --wpds-border-radius-xl: 12px;
 378  }
 379  
 380  [data-wpds-corner-radius=moderate],
 381  :root:has([data-wpds-root-provider=true][data-wpds-corner-radius=moderate]) {
 382    /* Buttons and other elements nested inside controls. */
 383    --wpds-border-radius-xs: 6px;
 384    /* Standalone buttons, inputs, and compact controls. */
 385    --wpds-border-radius-sm: 8px;
 386    /* Menus, popovers, and other small portaled overlays. */
 387    --wpds-border-radius-md: 12px;
 388    /* Cards, dialogs, notices, and other larger content containers. */
 389    --wpds-border-radius-lg: 16px;
 390    /* Page and app shell surfaces. */
 391    --wpds-border-radius-xl: 20px;
 392  }
 393  
 394  [data-wpds-corner-radius=pronounced],
 395  :root:has([data-wpds-root-provider=true][data-wpds-corner-radius=pronounced]) {
 396    /* Buttons and other elements nested inside controls. */
 397    --wpds-border-radius-xs: 18px;
 398    /* Standalone buttons, inputs, and compact controls. */
 399    --wpds-border-radius-sm: 20px;
 400    /* Menus, popovers, and other small portaled overlays. */
 401    --wpds-border-radius-md: 22px;
 402    /* Cards, dialogs, notices, and other larger content containers. */
 403    --wpds-border-radius-lg: 24px;
 404    /* Page and app shell surfaces. */
 405    --wpds-border-radius-xl: 26px;
 406  }