@import url('../layers.css');
@import url('../base/body.css');
@import url('../base/elements.css');
@import url('../color/palettes.css');
@import url('../color/semantic.css');
@import url('../color/variants.css');
@import url(https://frontend-cdn.eurodata.de/fonts/edfont.css);

@layer ed-theme {
  :where(:root),
  .ed-theme-default,
  .ed-light,
  .ed-dark .ed-invert,
  .ed-light .ed-theme-default,
  .ed-dark .ed-theme-default.ed-invert,
  .ed-dark .ed-theme-default .ed-invert {
    /* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */
    color-scheme: light;

    /** generals **/
    --ed-color-surface-default: light-dark(var(--ed-color-neutral-290), var(--ed-color-neutral-10));
    --ed-color-surface-raised: light-dark(var(--ed-color-white), var(--ed-color-black));

    --ed-color-mix-hover: light-dark(var(--ed-color-neutral-blue-10), var(--ed-color-neutral-blue-290)) 7%;
    --ed-color-mix-active: light-dark(var(--ed-color-neutral-blue-10), var(--ed-color-neutral-blue-290)) 11%;
    /* Text counterparts at 2x: dark text loses less luminance per mix step than a light background,
       so it must drift twice as fast to keep WCAG AA contrast in hover/active states. */
    --ed-color-mix-hover-text: light-dark(var(--ed-color-neutral-blue-10), var(--ed-color-neutral-blue-290)) 14%;
    --ed-color-mix-active-text: light-dark(var(--ed-color-neutral-blue-10), var(--ed-color-neutral-blue-290)) 22%;

    --ed-surface-hover: color-mix(in oklab, var(--ed-color-surface-default), var(--ed-color-mix-hover));
    --ed-surface-active: color-mix(in oklab, var(--ed-color-surface-default), var(--ed-color-mix-active));
    --ed-color-focus-border: light-dark(var(--ed-color-neutral-20), var(--ed-color-neutral-290));

    --ed-color-selected: hwb(from var(--ed-color-brand-fill-light) h w b / 0.7);

    --ed-color-border: light-dark(var(--ed-color-neutral-230), var(--ed-color-neutral-80));
    --ed-color-border-readonly: light-dark(
      hwb(from var(--ed-color-neutral-230) h w b / 0.35),
      hwb(from var(--ed-color-neutral-80) h w b / 0.35)
    );
    --ed-color-backdrop: rgba(0, 0, 0, 0.5);

    /** text styles **/
    --ed-color-text: light-dark(var(--ed-color-neutral-10), var(--ed-color-white));
    --ed-color-label: light-dark(var(--ed-color-neutral-60), var(--ed-color-neutral-190));
    --ed-color-title: light-dark(var(--ed-color-neutral-blue-120), var(--ed-color-neutral-260));
    --ed-color-subtitle: light-dark(var(--ed-color-neutral-100), var(--ed-color-white));
    --ed-color-text-selected: light-dark(var(--ed-color-brand-50), var(--ed-color-white));
    --ed-color-text-inverted: light-dark(var(--ed-color-white), var(--ed-color-neutral-10));
    --ed-color-text-placeholder: var(--ed-color-neutral-100);
    --ed-color-text-outdated: var(--ed-color-neutral-blue-140);
    --ed-color-text-disabled: light-dark(
      hwb(from var(--ed-color-neutral-50) h w b / 0.35),
      hwb(from var(--ed-color-neutral-280) h w b / 0.35)
    );
    --ed-color-text-link: var(--ed-color-brand-80);
    --ed-color-code-highlight: light-dark(var(--ed-color-neutral-270), var(--ed-color-neutral-60));

    /** drop shadow color **/
    --ed-color-shadow: rgba(0, 24, 30, 0.2);

    /** focus styles **/
    --ed-color-focus: var(--ed-color-electricsky-100);

    /** inputs **/
    --ed-form-control-readonly-background-color: light-dark(rgba(78, 123, 136, 0.08), rgba(0, 0, 0, 0.35));
    --ed-form-control-background-color: light-dark(var(--ed-color-white), var(--ed-color-black));

    /* Slider */
    --ed-color-slider-background-color: light-dark(var(--ed-color-neutral-blue-240), var(--ed-color-neutral-60));

    /** icons **/
    /*
    By default, icons will take the color of the parent element's text color.
    However, in our design system we specify neutral-190 as the default color if now other color is set.
    That leads to the fact, that our components should use this color as default if no other color is set but we still let the icons use their parents color if they are used in any other place than our components.
     */
    --ed-color-icon: light-dark(var(--ed-color-neutral-blue-160), var(--ed-color-neutral-blue-220));

    /** Tooltip **/
    --ed-color-tooltip-background: var(--ed-color-neutral-50);
    --ed-color-tooltip-border: var(--ed-color-neutral-50);
    --ed-color-tooltip-content: var(--ed-color-white);

    /** Details and Cards **
      Details and Cards do not follow our color system, therefore the colors are defined here. Hover and active are not fixed as in figma and use the color-mix like all other elements
     */
    --ed-color-details-fill: light-dark(var(--ed-color-neutral-280), var(--ed-color-neutral-30));
    --ed-color-card-fill: light-dark(var(--ed-color-neutral-280), var(--ed-color-neutral-30));

    /** wizard */
    --ed-color-wizard-connector: light-dark(var(--ed-color-neutral-blue-160), var(--ed-color-neutral-blue-220));
    --ed-color-wizard-connector-active: var(--ed-color-brand-80);
    --ed-color-wizard-step: light-dark(var(--ed-color-neutral-blue-160), var(--ed-color-neutral-blue-220));
    --ed-color-wizard-step-active: var(--ed-color-brand-90);

    /** tabs */
    --ed-color-tabs-plain-fill: transparent;
    --ed-color-tabs-filled-background: light-dark(var(--ed-color-neutral-blue-100), var(--ed-color-neutral-blue-30));
    --ed-color-tabs-filled-tab-background: light-dark(
      var(--ed-color-neutral-blue-140),
      var(--ed-color-neutral-blue-90)
    );
    --ed-color-tabs-filled-tab-content: var(--ed-color-white);

    /** header */
    --ed-color-header-background: light-dark(var(--ed-color-brand-40), var(--ed-color-brand-20));
    --ed-color-header-hover: light-dark(var(--ed-color-brand-50), var(--ed-color-brand-50));
    --ed-color-header-active: light-dark(var(--ed-color-brand-70), var(--ed-color-brand-70));
    --ed-color-header-focus: light-dark(var(--ed-color-brand-90), var(--ed-color-brand-90));
    --ed-color-header-input-background: light-dark(var(--ed-color-brand-60), var(--ed-color-brand-50));
    --ed-color-header-on: var(--ed-color-white);

    /****** COLOR VARIANTS ******/
    /** brand **/
    --ed-color-brand-fill-dark: light-dark(var(--ed-color-brand-40), var(--ed-color-brand-240));
    --ed-color-brand-fill-normal: var(--ed-color-brand-90);
    --ed-color-brand-fill-light: light-dark(var(--ed-color-brand-240), var(--ed-color-brand-30));
    --ed-color-brand-on-dark: var(--ed-color-text-inverted);
    --ed-color-brand-on-normal: var(--ed-color-white);
    --ed-color-brand-on-light: var(--ed-color-text);
    --ed-color-brand-on-surface: light-dark(var(--ed-color-brand-fill-normal), var(--ed-color-brand-fill-dark));
    --ed-color-brand-border-dark: var(--ed-color-brand-fill-dark);
    --ed-color-brand-border-normal: var(--ed-color-brand-fill-normal);
    --ed-color-brand-border-light: light-dark(var(--ed-color-brand-200), var(--ed-color-brand-120));

    /** neutral **/
    --ed-color-neutral-fill-dark: light-dark(var(--ed-color-neutral-blue-100), var(--ed-color-neutral-blue-270));
    --ed-color-neutral-fill-normal: var(--ed-color-neutral-blue-100);
    --ed-color-neutral-fill-light: light-dark(var(--ed-color-neutral-blue-270), var(--ed-color-neutral-blue-100));
    --ed-color-neutral-on-dark: var(--ed-color-text-inverted);
    --ed-color-neutral-on-normal: var(--ed-color-white);
    --ed-color-neutral-on-light: var(--ed-color-text);
    --ed-color-neutral-on-surface: light-dark(var(--ed-color-neutral-fill-normal), var(--ed-color-neutral-fill-dark));
    --ed-color-neutral-border-dark: var(--ed-color-neutral-fill-dark);
    --ed-color-neutral-border-normal: var(--ed-color-neutral-fill-normal);
    --ed-color-neutral-border-light: light-dark(var(--ed-color-neutral-blue-240), var(--ed-color-neutral-blue-120));

    /** ai **/
    --ed-color-ai-fill-dark: light-dark(var(--ed-color-ai-70), var(--ed-color-ai-150));
    --ed-color-ai-fill-normal: var(--ed-color-ai-100);
    --ed-color-ai-fill-light: light-dark(var(--ed-color-ai-150), var(--ed-color-ai-70));
    --ed-color-ai-on-dark: var(--ed-color-text-inverted);
    --ed-color-ai-on-normal: var(--ed-color-white);
    --ed-color-ai-on-light: var(--ed-color-text);
    --ed-color-ai-on-surface: light-dark(var(--ed-color-ai-fill-normal), var(--ed-color-ai-fill-dark));
    --ed-color-ai-border-dark: var(--ed-color-ai-fill-dark);
    --ed-color-ai-border-normal: var(--ed-color-ai-fill-normal);
    --ed-color-ai-border-light: light-dark(var(--ed-color-ai-140), var(--ed-color-ai-90));

    /** info **/
    --ed-color-info-fill-dark: light-dark(var(--ed-color-info-70), var(--ed-color-info-180));
    --ed-color-info-fill-normal: var(--ed-color-info-100);
    --ed-color-info-fill-light: light-dark(var(--ed-color-info-180), var(--ed-color-info-70));
    --ed-color-info-on-dark: var(--ed-color-text-inverted);
    --ed-color-info-on-normal: var(--ed-color-white);
    --ed-color-info-on-light: var(--ed-color-text);
    --ed-color-info-on-surface: light-dark(var(--ed-color-info-fill-normal), var(--ed-color-info-fill-dark));
    --ed-color-info-border-dark: var(--ed-color-info-fill-dark);
    --ed-color-info-border-normal: var(--ed-color-info-fill-normal);
    --ed-color-info-border-light: light-dark(var(--ed-color-info-160), var(--ed-color-info-100));

    /** success **/
    --ed-color-success-fill-dark: light-dark(var(--ed-color-success-70), var(--ed-color-success-170));
    --ed-color-success-fill-normal: var(--ed-color-success-80);
    --ed-color-success-fill-light: light-dark(var(--ed-color-success-170), var(--ed-color-success-70));
    --ed-color-success-on-dark: var(--ed-color-text-inverted);
    --ed-color-success-on-normal: var(--ed-color-white);
    --ed-color-success-on-light: var(--ed-color-text);
    --ed-color-success-on-surface: var(--ed-color-success-fill-dark);
    --ed-color-success-border-dark: var(--ed-color-success-fill-dark);
    --ed-color-success-border-normal: var(--ed-color-success-fill-normal);
    --ed-color-success-border-light: light-dark(var(--ed-color-success-150), var(--ed-color-success-100));

    /** warning **/
    --ed-color-warning-fill-dark: light-dark(var(--ed-color-warning-60), var(--ed-color-warning-170));
    --ed-color-warning-fill-normal: var(--ed-color-warning-100);
    --ed-color-warning-fill-light: light-dark(var(--ed-color-warning-170), var(--ed-color-warning-60));
    --ed-color-warning-on-dark: var(--ed-color-text-inverted);
    --ed-color-warning-on-normal: var(--ed-color-neutral-10);
    --ed-color-warning-on-light: var(--ed-color-text);
    --ed-color-warning-on-surface: var(--ed-color-warning-fill-dark);
    --ed-color-warning-border-dark: var(--ed-color-warning-fill-dark);
    --ed-color-warning-border-normal: var(--ed-color-warning-fill-normal);
    --ed-color-warning-border-light: light-dark(var(--ed-color-warning-140), var(--ed-color-warning-100));

    /** danger **/
    --ed-color-danger-fill-dark: light-dark(var(--ed-color-danger-70), var(--ed-color-danger-170));
    --ed-color-danger-fill-normal: var(--ed-color-danger-100);
    --ed-color-danger-fill-light: light-dark(var(--ed-color-danger-170), var(--ed-color-danger-70));
    --ed-color-danger-on-dark: var(--ed-color-text-inverted);
    --ed-color-danger-on-normal: var(--ed-color-white);
    --ed-color-danger-on-light: var(--ed-color-text);
    --ed-color-danger-on-surface: light-dark(var(--ed-color-danger-fill-normal), var(--ed-color-danger-fill-dark));
    --ed-color-danger-border-dark: var(--ed-color-danger-fill-dark);
    --ed-color-danger-border-normal: var(--ed-color-danger-fill-normal);
    --ed-color-danger-border-light: light-dark(var(--ed-color-danger-160), var(--ed-color-danger-100));

    /** new **/
    --ed-color-new-fill-dark: light-dark(var(--ed-color-new-70), var(--ed-color-new-180));
    --ed-color-new-fill-normal: var(--ed-color-new-80);
    --ed-color-new-fill-light: light-dark(var(--ed-color-new-180), var(--ed-color-new-70));
    --ed-color-new-on-dark: var(--ed-color-text-inverted);
    --ed-color-new-on-normal: var(--ed-color-white);
    --ed-color-new-on-light: var(--ed-color-text);
    --ed-color-new-on-surface: var(--ed-color-new-fill-dark);
    --ed-color-new-border-dark: var(--ed-color-new-fill-dark);
    --ed-color-new-border-normal: var(--ed-color-new-fill-normal);
    --ed-color-new-border-light: light-dark(var(--ed-color-new-160), var(--ed-color-new-100));

    /******* EXCEPTION VARIABLES ******
    * These variables where created because the color system wasn't applicable.
    * For example, the expired badges doesn't follow the same rules like all the other badge variants, because it has a transparent background.
    *
    * Some components should look the same in light and dark mode, for example the notification badges. To make this convenient,
    * we added the --ed-*-color-scheme variables that are set them to `light`.
    */

    --ed-color-notification-text: var(--ed-color-white); /* the text of the notification badges */
    --ed-color-badge-expired-border-color: var(
      --ed-color-petrol-180
    ); /* the border and icon color of the expired badge */

    --ed-badge-notification-color-scheme: light;
    --ed-badge-notification-alt-color-scheme: light;
  }

  .ed-dark,
  .ed-invert,
  .ed-dark .ed-theme-default,
  .ed-light .ed-theme-default.ed-invert,
  .ed-light .ed-theme-default .ed-invert {
    /* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */
    color-scheme: dark;

    --ed-badge-notification-color-scheme: light;
    --ed-badge-notification-alt-color-scheme: light;
  }

  :where(:root),
  .ed-theme-default,
  .ed-light,
  .ed-dark,
  .ed-invert {
    font-family: var(--ed-font-family-body);

    /* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --ed-font-family-body: 'Roboto', system-ui, sans-serif;
    --ed-font-family-heading: var(--ed-font-family-body);
    --ed-font-family-code: ui-monospace, monospace;

    /* Font sizes use a ratio of 1.125 to scale sizes proportionally.
     * For larger font sizes, each size is twice 1.125x larger to maximize impact.
     * Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */
    --ed-font-size-scale: 0.8125;
    --ed-font-size-2xs: round(calc(var(--ed-font-size-xs) / 1.125), 1px); /* 10px */
    --ed-font-size-xs: round(calc(var(--ed-font-size-s) / 1.125), 1px); /* 11px */
    --ed-font-size-s: round(calc(var(--ed-font-size-m) / 1.125), 1px); /* 12px */
    --ed-font-size-m: calc(1rem * var(--ed-font-size-scale)); /* 13px */
    --ed-font-size-l: round(calc(var(--ed-font-size-m) * 1.125 * 1.125), 1px); /* 16px */
    --ed-font-size-xl: round(calc(var(--ed-font-size-l) * 1.125 * 1.125), 1px); /* 20px */
    --ed-font-size-2xl: round(calc(var(--ed-font-size-xl) * 1.125 * 1.125), 1px); /* 25px */
    --ed-font-size-3xl: round(calc(var(--ed-font-size-2xl) * 1.125 * 1.125), 1px); /* 32px */
    --ed-font-size-4xl: round(calc(var(--ed-font-size-3xl) * 1.125 * 1.125), 1px); /* 41px */

    --ed-font-size-smaller: round(calc(1em / 1.125), 1px);
    --ed-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);

    --ed-font-weight-light: 300;
    --ed-font-weight-normal: 400;
    --ed-font-weight-medium: 500;
    --ed-font-weight-bold: 700;

    --ed-font-weight-body: var(--ed-font-weight-normal);
    --ed-font-weight-heading: var(--ed-font-weight-medium);
    --ed-font-weight-code: var(--ed-font-weight-normal);
    --ed-font-weight-action: var(--ed-font-weight-medium);
    --ed-font-weight-header-cell: var(--ed-font-weight-bold);

    --ed-line-height-normal: 1.25;
    --ed-line-height-expanded: 1.6;

    --ed-link-decoration-default: underline var(--ed-color-neutral-blue-190);
    --ed-link-decoration-hover: underline var(--ed-color-text-link);
    /* #endregion */

    /* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    /* Spacing — Tailwind-aligned, base 0.25rem (4px). Override --ed-space-base
       to change the unit (e.g. 0.2125rem for ~85% denser spacing). */
    --ed-space-base: 0.25rem;
    --ed-space-0: calc(0 * var(--ed-space-base));
    --ed-space-1: calc(1 * var(--ed-space-base)); /* 4px */
    --ed-space-2: calc(2 * var(--ed-space-base)); /* 8px */
    --ed-space-3: calc(3 * var(--ed-space-base)); /* 12px */
    --ed-space-4: calc(4 * var(--ed-space-base)); /* 16px */
    --ed-space-5: calc(5 * var(--ed-space-base)); /* 20px */
    --ed-space-6: calc(6 * var(--ed-space-base)); /* 24px */
    --ed-space-7: calc(7 * var(--ed-space-base)); /* 28px */
    --ed-space-8: calc(8 * var(--ed-space-base)); /* 32px */
    --ed-space-9: calc(9 * var(--ed-space-base)); /* 36px */
    --ed-space-10: calc(10 * var(--ed-space-base)); /* 40px */
    --ed-space-11: calc(11 * var(--ed-space-base)); /* 44px */
    --ed-space-12: calc(12 * var(--ed-space-base)); /* 48px */
    --ed-space-13: calc(13 * var(--ed-space-base)); /* 52px */
    --ed-space-14: calc(14 * var(--ed-space-base)); /* 56px */
    --ed-space-15: calc(15 * var(--ed-space-base)); /* 60px */
    --ed-space-16: calc(16 * var(--ed-space-base)); /* 64px */

    --ed-content-spacing: var(--ed-space-4);
    /* #endregion */

    /* #region Size ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    /* Sizing — for element dimensions (width/height/min-size). Same shape as
       --ed-space-N but with an independent base so density themes can move
       padding without moving hit-targets. */
    --ed-size-base: 0.25rem;
    --ed-size-0: calc(0 * var(--ed-size-base));
    --ed-size-1: calc(1 * var(--ed-size-base)); /* 4px */
    --ed-size-2: calc(2 * var(--ed-size-base)); /* 8px */
    --ed-size-3: calc(3 * var(--ed-size-base)); /* 12px */
    --ed-size-4: calc(4 * var(--ed-size-base)); /* 16px */
    --ed-size-5: calc(5 * var(--ed-size-base)); /* 20px */
    --ed-size-6: calc(6 * var(--ed-size-base)); /* 24px */
    --ed-size-7: calc(7 * var(--ed-size-base)); /* 28px */
    --ed-size-8: calc(8 * var(--ed-size-base)); /* 32px */
    --ed-size-9: calc(9 * var(--ed-size-base)); /* 36px */
    --ed-size-10: calc(10 * var(--ed-size-base)); /* 40px */
    --ed-size-11: calc(11 * var(--ed-size-base)); /* 44px */
    --ed-size-12: calc(12 * var(--ed-size-base)); /* 48px */
    --ed-size-13: calc(13 * var(--ed-size-base)); /* 52px */
    --ed-size-14: calc(14 * var(--ed-size-base)); /* 56px */
    --ed-size-15: calc(15 * var(--ed-size-base)); /* 60px */
    --ed-size-16: calc(16 * var(--ed-size-base)); /* 64px */
    /* #endregion */

    /* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --ed-border-style: solid;
    --ed-border-width-base: 0.0625rem; /* 1px */
    --ed-border-width-1: calc(1 * var(--ed-border-width-base)); /* 1px */
    --ed-border-width-2: calc(2 * var(--ed-border-width-base)); /* 2px */
    --ed-border-width-3: calc(3 * var(--ed-border-width-base)); /* 3px */

    /* #endregion */

    /* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
    /* Border radius — geometric (doubling) scale. The `Nx` suffix denotes the
       doubling step; values double per rung. Base controls the smallest rung. */
    --ed-border-radius-base: 0.125rem; /* 2px */
    --ed-border-radius-1x: calc(1 * var(--ed-border-radius-base)); /* 2px */
    --ed-border-radius-2x: calc(2 * var(--ed-border-radius-base)); /* 4px */
    --ed-border-radius-3x: calc(4 * var(--ed-border-radius-base)); /* 8px */
    --ed-border-radius-4x: calc(8 * var(--ed-border-radius-base)); /* 16px */

    --ed-border-radius-pill: 9999px;
    --ed-border-radius-circle: 50%;
    --ed-border-radius-square: 0px;

    /* #endregion */

    /* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --ed-focus-ring-style: solid;
    --ed-focus-ring-width: var(--ed-border-width-3); /* 3px */
    --ed-focus-ring: var(--ed-focus-ring-style) var(--ed-focus-ring-width) var(--ed-color-focus);
    --ed-focus-ring-offset: var(--ed-border-width-1); /* 1px */
    --ed-focus-ring-offset-inset: calc(-1 * var(--ed-focus-ring-width)); /* -3px */
    /* #endregion */

    /* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --ed-shadow-offset-x-scale: 0;
    --ed-shadow-offset-x-xs: calc(var(--ed-shadow-offset-x-scale) * 0.25rem);
    --ed-shadow-offset-x-s: calc(var(--ed-shadow-offset-x-scale) * 0.5rem);
    --ed-shadow-offset-x-m: calc(var(--ed-shadow-offset-x-scale) * 1rem);
    --ed-shadow-offset-x-l: calc(var(--ed-shadow-offset-x-scale) * 1.5rem);

    --ed-shadow-offset-y-scale: 1;
    --ed-shadow-offset-y-xs: calc(var(--ed-shadow-offset-y-scale) * 0.25rem);
    --ed-shadow-offset-y-s: calc(var(--ed-shadow-offset-y-scale) * 0.5rem);
    --ed-shadow-offset-y-m: calc(var(--ed-shadow-offset-y-scale) * 1rem);
    --ed-shadow-offset-y-l: calc(var(--ed-shadow-offset-y-scale) * 1.5rem);

    --ed-shadow-blur-scale: 1;
    --ed-shadow-blur-xs: calc(var(--ed-shadow-blur-scale) * 0.25rem);
    --ed-shadow-blur-s: calc(var(--ed-shadow-blur-scale) * 1rem);
    --ed-shadow-blur-m: calc(var(--ed-shadow-blur-scale) * 2rem);
    --ed-shadow-blur-l: calc(var(--ed-shadow-blur-scale) * 3rem);

    --ed-shadow-spread-scale: 0;
    --ed-shadow-spread-xs: calc(var(--ed-shadow-spread-scale) * 0.25rem);
    --ed-shadow-spread-s: calc(var(--ed-shadow-spread-scale) * 1rem);
    --ed-shadow-spread-m: calc(var(--ed-shadow-spread-scale) * 2rem);
    --ed-shadow-spread-l: calc(var(--ed-shadow-spread-scale) * 3rem);

    --ed-shadow-xs: var(--ed-shadow-offset-x-xs) var(--ed-shadow-offset-y-xs) var(--ed-shadow-blur-xs)
      var(--ed-shadow-spread-xs) var(--ed-color-shadow);
    --ed-shadow-s: var(--ed-shadow-offset-x-s) var(--ed-shadow-offset-y-s) var(--ed-shadow-blur-s)
      var(--ed-shadow-spread-s) var(--ed-color-shadow);
    --ed-shadow-m: var(--ed-shadow-offset-x-m) var(--ed-shadow-offset-y-m) var(--ed-shadow-blur-m)
      var(--ed-shadow-spread-m) var(--ed-color-shadow);
    --ed-shadow-l: var(--ed-shadow-offset-x-l) var(--ed-shadow-offset-y-l) var(--ed-shadow-blur-l)
      var(--ed-shadow-spread-l) var(--ed-color-shadow);
    /* #endregion */

    /* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */
    --ed-transition-easing: ease;
    --ed-transition-slow: 300ms;
    --ed-transition-normal: 150ms;
    --ed-transition-fast: 75ms;
    /* #endregion */

    /* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */
    /* Form Controls
     *
     * Em-relative carve-out: the `em`-based declarations below
     * (border-radius, required-content-offset, padding-block, padding-inline,
     * height, toggle-size) deliberately track form-control font-size — the
     * sole sanctioned exception to the spatial-alias-references-primitive
     * rule. Non-em declarations in this block follow the standard rule.
     */

    --ed-form-control-border-color: var(--ed-color-neutral-blue-160);
    --ed-form-control-border-style: var(--ed-border-style);
    --ed-form-control-border-width: var(--ed-border-width-1);
    --ed-form-control-border-radius: round(down, 0.31em, 1px);

    --ed-form-control-activated-color: var(--ed-color-brand-fill-normal);

    --ed-form-control-label-color: var(--ed-color-label);
    --ed-form-control-label-font-weight: var(--ed-font-weight-normal);
    --ed-form-control-label-line-height: var(--ed-line-height-normal);

    --ed-form-control-value-color: var(--ed-color-text);
    --ed-form-control-value-font-weight: var(--ed-font-weight-medium);
    --ed-form-control-value-line-height: var(--ed-line-height-normal);

    --ed-form-control-hint-color: var(--ed-color-label);
    --ed-form-control-hint-font-weight: var(--ed-font-weight-body);
    --ed-form-control-hint-line-height: var(--ed-line-height-normal);

    --ed-form-control-placeholder-color: var(--ed-color-text-placeholder);

    --ed-form-control-required-content: '*';
    --ed-form-control-required-content-color: inherit;
    --ed-form-control-required-content-offset: 0.1em;

    --ed-form-control-padding-block: round(down, 0.65em, 1px);
    --ed-form-control-padding-inline: round(down, 0.65em, 1px);
    --ed-form-control-height: round(
      down,
      calc(2 * var(--ed-form-control-padding-block) + calc(1em * var(--ed-line-height-normal))),
      1px
    );
    --ed-form-control-toggle-size: round(1.25em, 1px);

    /* Panels */
    --ed-panel-border-style: var(--ed-border-style);
    --ed-panel-border-width: var(--ed-border-width-1);
    --ed-panel-border-radius: var(--ed-border-radius-3x);
    --ed-panel-spacing: var(--ed-space-5);

    /* Tooltips */
    --ed-tooltip-arrow-size: 0.375rem; /* 6px — intentional raw rem: 6px is not representable on the integer scale */

    --ed-tooltip-border-style: none;
    --ed-tooltip-border-width: 0px; /* must include unit — unitless 0 breaks calc() in popup arrow sizing */
    --ed-tooltip-border-radius: var(--ed-border-radius-2x);

    --ed-tooltip-font-size: var(--ed-font-size-m);
    --ed-tooltip-line-height: var(--ed-line-height-expanded);

    /* Dialog */
    --ed-dialog-width: 30rem;
    --ed-dialog-min-width: 20rem;

    /* Empty State */
    --ed-empty-state-max-width: 32rem;
    --ed-empty-state-min-height: 22rem;
    --ed-empty-state-icon-min-width: 10rem;

    /* Side Menu — also the fallback width of ed-app's navigation column when nothing
       measurable is slotted into it. */
    --ed-side-menu-width: 16.875rem;

    /* Listbox — how far the option list of ed-select and ed-combobox grows before it scrolls.
       Viewport-relative so it adapts to the window; the popup's own auto-size still applies on top,
       so the list never leaves the viewport when there is less room than this. */
    --ed-listbox-max-height: 40vh;

    /* Popover */
    --ed-popover-max-width: 25rem;

    /* Tree */
    --ed-tree-width: 15.625rem;
    /* #endregion */

    --ed-disabled-opacity: 0.35;
    --ed-header-size: var(--ed-size-13);

    /* Toast stack — sits above dialogs (9999) so a toast over a dialog remains visible */
    --ed-z-index-toast: 10000;
  }
}