@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;

    /* Page */
    --ed-app-menu-width: 16.875rem;

    /* Side Menu */
    --ed-side-menu-width: 16.875rem;

    /* 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;
  }
}