@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('../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-blue-10));
    --ed-color-surface-raised: light-dark(var(--ed-color-white), var(--ed-color-neutral-30));

    --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%;
    /* Fill counterparts darken in both schemes. Most dark-scheme accent and filled fills carry a light
       label, and lightening them toward it drops hover and press below AA. Brand and warning accents
       carry a dark label, so darkening narrows their margin instead; they keep more than 5:1. Black
       rather than neutral-blue-10, which is close enough to the darkest fills to leave them unchanged. */
    --ed-color-mix-hover-fill: light-dark(var(--ed-color-neutral-blue-10), var(--ed-color-black)) 7%;
    --ed-color-mix-active-fill: light-dark(var(--ed-color-neutral-blue-10), var(--ed-color-black)) 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: light-dark(
      hwb(from var(--ed-color-brand-240) h w b / 0.7),
      hwb(from var(--ed-color-brand-70) h w b / 0.7)
    );

    --ed-color-border: light-dark(var(--ed-color-neutral-230), var(--ed-color-neutral-blue-100));
    --ed-color-border-readonly: light-dark(
      hwb(from var(--ed-color-neutral-230) h w b / 0.35),
      hwb(from var(--ed-color-neutral-blue-100) 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-neutral-blue-290));
    --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-neutral-290));
    --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: light-dark(var(--ed-color-neutral-100), var(--ed-color-neutral-160));
    --ed-color-text-outdated: light-dark(var(--ed-color-neutral-blue-140), var(--ed-color-neutral-blue-190));
    --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: light-dark(var(--ed-color-brand-80), var(--ed-color-brand-140));
    --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(
      hwb(from var(--ed-color-neutral-blue-140) h w b / 0.08),
      hwb(from var(--ed-color-neutral-blue-220) h w b / 0.08)
    );
    --ed-form-control-background-color: light-dark(var(--ed-color-white), var(--ed-color-neutral-10));
    --ed-form-control-ai-background-color: light-dark(var(--ed-color-ai-180), var(--ed-color-ai-40));
    --ed-form-control-autofill-background-color: light-dark(var(--ed-color-darksun-180), var(--ed-color-darksun-60));

    /* 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: light-dark(var(--ed-color-neutral-50), var(--ed-color-neutral-70));
    --ed-color-tooltip-border: var(--ed-color-tooltip-background);
    --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-20));
    --ed-color-card-fill: light-dark(var(--ed-color-neutral-280), var(--ed-color-neutral-20));

    /** 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: var(--ed-color-brand-40);
    --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: var(--ed-color-brand-80);
    --ed-color-header-input-placeholder: var(--ed-color-brand-250);
    --ed-color-header-on: var(--ed-color-white);

    /** page editor */
    --ed-color-page-editor-group-background: light-dark(
      var(--ed-color-neutral-blue-270),
      var(--ed-color-neutral-blue-140)
    );
    /* The merged marker is drawn on the group background, the split markers on the canvas. */
    --ed-color-page-editor-cut-marker: light-dark(var(--ed-color-brand-50), var(--ed-color-brand-270));
    --ed-color-page-editor-cut-marker-split: light-dark(var(--ed-color-brand-100), var(--ed-color-brand-140));
    --ed-color-page-editor-cut-marker-ai: light-dark(var(--ed-color-ai-100), var(--ed-color-ai-120));

    /****** COLOR VARIANTS ******/
    /** brand **/
    --ed-color-brand-fill-dark: light-dark(var(--ed-color-brand-40), var(--ed-color-brand-220));
    --ed-color-brand-fill-normal: light-dark(var(--ed-color-brand-90), var(--ed-color-brand-170));
    --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: light-dark(var(--ed-color-white), var(--ed-color-brand-10));
    --ed-color-brand-on-light: var(--ed-color-brand-fill-dark);
    --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-neutral-fill-dark);
    --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-60));
    --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-ai-fill-dark);
    --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-info-fill-dark);
    --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-success-fill-dark);
    --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-warning-fill-dark);
    --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-90));

    /** 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-danger-fill-dark);
    --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-new-fill-dark);
    --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);

    /* The full CSS weight scale. Roboto ships 100, 300, 400, 500, 700 and 900; the others render with
       the nearest cut until the font does, and stay here for a consumer's font family that has them. */
    --ed-font-weight-thin: 100;
    --ed-font-weight-extralight: 200;
    --ed-font-weight-light: 300;
    --ed-font-weight-normal: 400;
    --ed-font-weight-medium: 500;
    --ed-font-weight-semibold: 600;
    --ed-font-weight-bold: 700;
    --ed-font-weight-extrabold: 800;
    --ed-font-weight-black: 900;

    --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: light-dark(var(--ed-color-neutral-blue-160), var(--ed-color-neutral-blue-220));
    --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);

    /* What the field box and its placeholder mix toward under the pointer and on press, in the text
       fields (input, textarea, number input, select, combobox, date picker, tag input). A field
       that is a fill under light text, like the one in ed-header, sets the fill mixes and keeps its
       placeholder unmixed, which holds it at AA. */
    --ed-form-control-hover-mix: var(--ed-color-mix-hover);
    --ed-form-control-active-mix: var(--ed-color-mix-active);
    --ed-form-control-placeholder-hover-mix: var(--ed-color-mix-hover-text);
    --ed-form-control-placeholder-active-mix: var(--ed-color-mix-active-text);

    --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);
    /* The line box of a control's label and of an item row's label, rounded down to whole pixels:
       a fractional line box (13px x 1.25 = 16.25px) and an icon's whole-pixel box snap to different
       pixel rows at some sub-pixel offsets, and the icon sits 1px off the text. The em resolves
       where the token is used, at that element's font size. Running text keeps the ratio. */
    --ed-form-control-line-height: round(down, calc(1em * var(--ed-line-height-normal)), 1px);
    --ed-form-control-height: round(
      down,
      calc(2 * var(--ed-form-control-padding-block) + var(--ed-form-control-line-height)),
      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;
  }
}