[Summary view] [Print] [Text view]

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