@import url('../layers.css');
@import url('../color/palettes.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;

    /** changes from sophies pet:
    - hover color for all elements gets calculated with color-mix black 7%
    - active color for all elements gets calculated with color-mix black 11%

    - fill-normal for all variants that didn't had that color is set to 100 as default
    - changed the color of the info variant from petrol to steel to differ from brand (and obviously if the brand is set to orange the info badge should still be blue and not orange)

    - fill-normal in dark mode is not different from the light scheme for now


    - fill-light in dark mode is mostly switched to 70 (was 80,70 or 60 --> see list below)
        [variant, icon color, dark mode background --> new value]
        -- brand was not there before
        -- neutral uses large color palette therefore it can't follow the same scheme. fill-dark in dark mode was changed from white to bluegray-270. Icon color changed from coolgray to bluegray to match the rest of the colors
        -- ai 100, 60 --> 70
        -- info petrol-80 --> steel-70
        -- success 80 --> 70
        -- warning 60,80 --> 70
        -- danger 70,80 --> 70
        -- new not changed

    - notification badge is not a distinct variant anymore and uses danger colors for now
    - notification-alt similar uses the variant "new" colors


    todo CHANGES to discuss:
    - search-highlight changed from darksun-160 to darksun-170 to match warning-fill-light
    - selected color in dark mode does not have an opacity, now the same opacity as in light mode is used
    - outlined and plain buttons in all variants now have darker text (fill-normal changed to fill-dark). This is needed to match the color contrast for AA
    - filled and filled-outlined buttons are not defined in figma and are using the default font-color for now

    - notifications: (changes were made to match the same system as badges, ps: badges match color contrast, notifications didn't)
      - error background changed from 180 to 170
      - info all colors changed from petrol to steel
      - success background changed from 180 to 170
      - warning background changed from 180 to 170; border color changed from 150 to 140
      - ai background changed from 170 to 150 (could be to dark but this matches the badges)
      - all icon colors were changed from fill-normal (the 100 value) to their dark value (same as badges do)
      - "show more" text changed from surfie to default text because of color contrast issues
      - this is not only consistency change, it is also necessary to meet the contrast requirements in dark mode.

    - in dark mode the text color is not white instead of neutral-280 (requested from elif)
    - all form controls use --ed-color-label for label
    - change radio icon size from 6x6 to 7x7
    - details hover and active are now calculated based on the mix variables

    - cards:
      - hover and active are now calculated with color-mix function
      - selected color is now the same selected color as for other elements.>


    - introducing semantic color scales brand, ai, info, success, warning, danger, neutral, neutral-blue, new
    - links (a tags plain text) is not petrol-80 instead of 100 to ensure AA color contrast

    - empty state label color changed to default label color

    - Dialogs have the l box-shadow instead of m. This is because in figma the dialog is always shown without the backdrop which has already a dark coloring. Using the m shadow is nearly invisible. For draggable Dialogs, where the background isn't locked, we need the l shadow to make the separation from the background clear.

    - skeleton default colors changed from neutral-fill-normal to neutral-blue-260 (color) and neutral-210 (sheen-color). The styleguide colors were tested on a white background only and are nearly invisible on the actual app background (neutral-290).


      todo: things that are not AA conform:
      - outdated and disabled text
      - placeholder text (inputs)

     */

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

    --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-160);
    --ed-color-text-outdated: var(--ed-color-neutral-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-focus-shadow-inset: inset var(--ed-form-control-activated-color) 0 0 round(down, 0.461em, 1px) 0;
    --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: var(--ed-color-neutral-250);
    --ed-color-wizard-connector-active: var(--ed-color-brand-80);
    --ed-color-wizard-step: var(--ed-color-neutral-190);
    --ed-color-wizard-step-active: var(--ed-color-brand-90);

    /** tabs */
    --ed-color-tabs-plain-fill: light-dark(transparent, var(--ed-color-neutral-290));
    --ed-color-tabs-filled-background: var(--ed-color-neutral-blue-100);

    /** 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 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --ed-space-scale: 1;
    --ed-space-4xs: calc(var(--ed-space-scale) * 0.125rem); /* 2px */
    --ed-space-3xs: calc(var(--ed-space-scale) * 0.25rem); /* 4px */
    --ed-space-2xs: calc(var(--ed-space-scale) * 0.375rem); /* 6px */
    --ed-space-xs: calc(var(--ed-space-scale) * 0.5rem); /* 8px */
    --ed-space-s: calc(var(--ed-space-scale) * 0.75rem); /* 12px */
    --ed-space-m: calc(var(--ed-space-scale) * 1rem); /* 16px */
    --ed-space-l: calc(var(--ed-space-scale) * 1.25rem); /* 20px */
    --ed-space-xl: calc(var(--ed-space-scale) * 1.5rem); /* 24px */
    --ed-space-2xl: calc(var(--ed-space-scale) * 2rem); /* 32px */
    --ed-space-3xl: calc(var(--ed-space-scale) * 3rem); /* 48px */
    --ed-space-4xl: calc(var(--ed-space-scale) * 4rem); /* 64px */

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

    /* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --ed-border-style: solid;
    --ed-border-width-scale: 1;
    --ed-border-width-s: calc(var(--ed-border-width-scale) * 0.0625rem); /* 1px */
    --ed-border-width-m: calc(var(--ed-border-width-scale) * 0.125rem); /* 2px */
    --ed-border-width-l: calc(var(--ed-border-width-scale) * 0.1875rem); /* 3px */
    /* #endregion */

    /* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --ed-border-radius-scale: 1;
    --ed-border-radius-s: calc(var(--ed-border-radius-scale) * 0.125rem); /* 2px */
    --ed-border-radius-m: calc(var(--ed-border-radius-scale) * 0.25rem); /* 4px */
    --ed-border-radius-l: calc(var(--ed-border-radius-scale) * 0.5rem); /* 8px */
    --ed-border-radius-xl: calc(var(--ed-border-radius-scale) * 1rem); /* 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: 0.1875rem; /* 3px */
    --ed-focus-ring: var(--ed-focus-ring-style) var(--ed-focus-ring-width) var(--ed-color-focus);
    --ed-focus-ring-offset: 0.0625rem; /* 1px */
    /* #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 */

    --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-s);
    --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-s);
    --ed-panel-border-radius: var(--ed-border-radius-l);
    --ed-panel-spacing: var(--ed-space-l);

    /* Tooltips */
    --ed-tooltip-arrow-size: 0.375rem; /* 6px */

    --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-m);

    --ed-tooltip-font-size: var(--ed-font-size-m);
    --ed-tooltip-line-height: var(--ed-line-height-expanded);
    /* #endregion */

    --ed-disabled-opacity: 0.35;
    --ed-header-size: 3.25rem;
  }
}