variables.pcss.css

@import "media-queries.pcss.css";

/* cspell:ignore xxxs */
:root {
  /*
   * Color Palette.
   */
  --color-absolutezero: var(--color-blue-600);
  --color-white: #fff;
  --color-text: var(--gin-color-text);
  --color-text-light: var(--color-gray-500);
  --color-gray-050-o-40: rgb(243, 244, 249, 0.4);
  /* Secondary. */
  --color-gray-200-o-80: rgb(212, 212, 218, 0.8);
  --color-maximumred: var(--color-red-500);
  --color-sunglow: #ffd23f;
  --color-sunglow-shaded: #977405;
  --color-lightninggreen: #26a769; /* Claro focus ring */
  --color-focus: var(--gin-color-focus);
  /* Variations. */
  --color-absolutezero-hover: var(--color-blue-650); /* 5% darker than base. */
  --color-absolutezero-active: var(--color-blue-700); /* 10% darker than base. */
  --color-maximumred-hover: var(--color-red-550); /* 5% darker than base. */
  --color-maximumred-active: var(--color-red-600); /* 10% darker than base. */
  --color-bgblue-hover: var(--color-blue-020); /* 2% darker than base. */
  --color-bgblue-active: var(--color-blue-050); /* 5% darker than base. */
  --color-bgred-hover: var(--color-red-020); /* 5% darker than base. */
  --color-bgred-active: var(--color-red-050); /* 10% darker than base. */
  /* Gray variations. */
  --color-gray: #232429;
  --color-gray-900: #393a3f;
  --color-gray-800: #55565b;
  --color-gray-700: #75767b;
  --color-gray-600: #828388;
  --color-gray-500: #919297;
  --color-gray-400: #adaeb3;
  --color-gray-300: #c1c2c7;
  --color-gray-200: #d3d4d9;
  --color-gray-100: #dedfe4;
  --color-gray-050: #f3f4f9;
  --color-gray-025: #f9faff;
  /* Blue variations. */
  --color-blue: var(--color-blue-600);
  --color-blue-900: #000f33;
  --color-blue-800: #001f66;
  --color-blue-700: #002e9a;
  --color-blue-650: #0036b1;
  --color-blue-600: #003ecc;
  --color-blue-500: #004eff;
  --color-blue-400: #3371ff;
  --color-blue-300: #6694ff;
  --color-blue-200: #99b8ff;
  --color-blue-100: #ccdbff;
  --color-blue-070: #dbe6ff;
  --color-blue-050: #e5edff;
  --color-blue-020: #f5f8ff;
  /* Red variations. */
  --color-red: var(--color-red-500);
  --color-red-900: #2c0707;
  --color-red-800: #580e0e;
  --color-red-700: #841515;
  --color-red-600: #b01c1c;
  --color-red-550: #c61f1f;
  --color-red-500: #dc2323;
  --color-red-400: #e34f4f;
  --color-red-300: #ea7b7b;
  --color-red-200: #f1a7a7;
  --color-red-100: #f8d3d3;
  --color-red-070: #fae0e0;
  --color-red-050: #fce9e9;
  --color-red-020: #fdf5f5;

  /*
   * Base.
   */
  --color-fg: var(--color-text);
  --color-bg: var(--color-white);
  --color-link: var(--color-absolutezero);
  --color-link-hover: var(--color-absolutezero-hover);
  --color-link-active: var(--color-absolutezero-active);

  /*
   * Typography.
   */
  --font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --font-family-serif: "Times New Roman", times, serif;
  --line-height: 1.5;
  --line-height-heading: 1.3;
  --line-height-form-label: calc(18rem / 16); /* 18px */
  --font-size-base: 1rem; /* 1rem = 16px if font root is 100% ands browser defaults are used. */
  --font-size-xl: 2.25rem; /* ~36px */
  --font-size-h1: 2.027rem; /* ~32px */
  --font-size-h2: 1.802rem; /* ~29px */
  --font-size-h3: 1.602rem; /* ~26px */
  --font-size-h4: 1.424rem; /* ~23px */
  --font-size-h5: 1.266rem; /* ~20px */
  --font-size-h6: 1.125rem; /* 18px */
  --font-size-s: 0.875rem; /* 14px */
  --font-size-xs: small; /* 13px */
  --font-size-xxs: 0.75rem; /* 12px */
  --font-size-label: var(--font-size-s);
  --font-size-description: var(--font-size-xs);
  --font-weight-normal: 400;
  --font-weight-semibold: 525;
  --font-weight-bold: 575;
  --font-weight-heavy: 625;
  /**
   * Spaces.
   */
  --space-xxxl: 4rem; /* 4 * 16px = 64px */
  --space-xxl: 3rem; /* 3 * 16px = 48px */
  --space-xl: 2rem; /* 2 * 16px = 32px */
  --space-l: 1.5rem; /* 1.5 * 16px = 24px */
  --space-m: 1rem; /* 1 * 16px = 16px */
  --space-s: 0.75rem; /* 0.75 * 16px = 12px */
  --space-xs: 0.5rem; /* 0.5 * 16px = 8px */
  --space-xxs: 0.25rem; /* 0.25 * 16px = 4px */
  --space-xxxs: 0.125rem; /* 0.125 * 16px = 2px */
  /*
   * Common.
   */
  --easing: cubic-bezier(0.19, 1, 0.22, 1);
  --speed-transition: 0.15s;
  --transition: all var(--speed-transition) var(--easing);
  --base-border-radius: 2px;
  --focus-border-size: calc(var(--base-border-radius) - 1px);
  --focus-border-offset-size: 0px;
  --outline-size: 4px;
  --focus-outline: var(--outline-size) solid var(--gin-color-focus);
  --focus-box-shadow: 0 0 0 var(--focus-border-offset-size) var(--color-white), 0 0 0 calc(var(--focus-border-size) + var(--focus-border-offset-size)) var(--color-focus);
  --focus-ring: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus);
  --focus-ring-focused: 0 0 0 1px var(--app-bg-color), 0 0 0 4px var(--color-focus), inset 0 0 0 var(--input-border-size) var(--input--hover-border-color);
  /**
   * Shadows.
   */
  --shadow-z3: 0 14px 30px rgb(0, 0, 0, 0.1);
  /*
   * Inputs.
   */
  --input-fg-color: var(--color-fg);
  --input-bg-color: var(--color-bg);
  --input-fg-color--description: var(--color-gray-800);
  --input-fg-color--placeholder: var(--color-gray-700);
  --input-border-color: var(--color-gray-500);
  --input--hover-border-color: var(--color-text);
  --input--focus-border-color: var(--color-absolutezero);
  --input--error-color: var(--color-maximumred);
  --input--error-border-color: var(--color-maximumred);
  --input--disabled-color: rgb(84, 85, 96, 0.6); /* Davy's gray with 0.6 opacity. */
  --input--disabled-fg-color: var(--color-gray-800);
  --input--disabled-bg-color: #f2f2f3; /* Light gray with 0.3 opacity on white bg. */
  --input--disabled-border-color: #bababf; /* Old silver with 0.5 opacity on white bg. */
  --input--disabled-border-opacity: 0.5;
  --input-border-radius-size: 0.125rem; /* (1/8)em ~ 2px */
  --input-border-size: 1px; /* (1/16)em ~ 1px */
  --input--error-border-size: 2px;
  --input-padding-vertical: calc(var(--space-s) - var(--input-border-size));
  --input-padding-horizontal: calc(var(--space-m) - var(--input-border-size));
  --input-font-size: var(--font-size-base);
  --input-line-height: var(--space-l);
  --input-padding-vertical--small: calc(var(--space-xs) - (var(--input-border-size) * 2));
  --input-padding-horizontal--small: calc(var(--space-m) - var(--input-border-size));
  --input-font-size--small: var(--font-size-xs);
  --input-line-height--small: 1.3125rem;
  --input--extrasmall-padding-vertical: calc(0.15rem - var(--input-border-size));
  --input--extrasmall-padding-horizontal: calc(var(--space-xs) - var(--input-border-size));
  --input--extrasmall-font-size: var(--font-size-s);
  --input--extrasmall-line-height: calc(var(--space-m) + 0.2rem); /* Font size is too big to use 1rem for extrasmall line-height */
  --input--required-mark-size: 0.4375rem; /* 7px inside the form element label. */
  --input--label-spacing: 1.6875rem; /* 8px with the checkbox width of 19px */
  /*
   * Details.
   */
  --details-border-color: var(--color-gray-100);
  --details-summary-shadow-color: var(--color-focus);
  --details-summary-focus-border-size: var(--focus-border-size);
  --details-desktop-wrapper-padding-start: calc(var(--space-m) + var(--space-s) + var(--space-xs));
  --details-box-shadow: 0 2px 4px rgb(0, 0, 0, 0.1);
  --details-border-size: 1px;
  --details-border-size-radius: 2px;
  --details-accordion-border-size-radius: var(--base-border-radius);
  --details-spread-box-shadow-radius: 2px;
  --details-bg-color-transition-duration: 0.12s;
  --details-box-shadow-transition-duration: 0.2s;
  --details-transform-transition-duration: 0.12s;
  --details-line-height: 1.295rem;
  /**
   * Buttons.
   */
  --button-font-size: var(--font-size-s);
  --button-font-weight: var(--font-weight-semibold);
  --button--focus-border-color: var(--color-blue-300);
  --button-border-radius-size: var(--base-border-radius);
  --button-fg-color: var(--color-gray-900);
  --button-bg-color: var(--color-gray-050);
  --button-border-color: var(--color-gray-200);
  --button--hover-bg-color: var(--color-gray-100);
  --button--hover-border-color: var(--color-gray-300);
  --button--active-bg-color: var(--color-gray-200);
  --button--active-border-color: var(--color-gray-400);
  --button--disabled-bg-color: #ebebed;
  --button--disabled-fg-color: var(--color-gray-500);
  --button-fg-color--primary: var(--gin-color-button-text);
  --button-bg-color--primary: var(--accent-color-500);
  --button--hover-bg-color--primary: var(--accent-color-550);
  --button--active-bg-color--primary: var(--accent-color-600);
  --button--focus-bg-color--primary: var(--button-bg-color--primary);
  --button--disabled-bg-color--primary: var(--color-gray-200);
  --button--disabled-fg-color--primary: var(--color-gray-600);
  --button-fg-color--danger: var(--gin-color-button-text);
  --button-bg-color--danger: var(--color-maximumred);
  --button--hover-bg-color--danger: var(--color-maximumred-hover);
  --button--active-bg-color--danger: var(--color-maximumred-active);
  --dropbutton-widget-z-index: 100;
  /**
   * jQuery.UI dropdown.
   */
  --jui-dropdown-fg-color: var(--color-gray-800);
  --jui-dropdown-bg-color: var(--color-white);
  --jui-dropdown--active-fg-color: var(--color-white);
  --jui-dropdown--active-bg-color: var(--color-absolutezero);
  --jui-dropdown-border-color: rgb(216, 217, 224, 0.8); /* Light gray with 0.8 opacity. */
  --jui-dropdown-shadow-color: rgb(34, 35, 48, 0.1); /* Text color with 0.1 opacity. */
  /**
   * jQuery.UI dialog.
   */
  --jui-dialog-title-color: var(--color-white);
  --jui-dialog-title-bg-color: var(--color-text);
  --jui-dialog-title-font-size: var(--font-size-h4);
  --jui-dialog-close-button-size: calc(var(--space-m) * 2);
  --jui-dialog-close-button-border-radius: 50%;
  --jui-dialog-close-button-reserved-space: calc(var(--space-m) * 4);
  --jui-dialog-off-canvas-close-button-reserved-space: calc(var(--space-m) * 3);
  --jui-dialog-border-radius: 4px;
  --jui-dialog-box-shadow: 0 0 var(--space-m) calc(var(--space-m) / -4) var(--color-text);
  --jui-dialog--focus-outline: 2px dotted transparent;
  --jui-dialog--focus-box-shadow: 0 0 0 3px var(--color-focus);
  --jui-dialog-z-index: 1260;
  --jui-dialog-off-canvas-z-index: 501;
  /**
   * Progress bar.
   */
  --progress-bar-border-size: 1px;
  --progress-bar-small-size: calc(var(--space-xs) - (2 * var(--progress-bar-border-size)));
  --progress-bar-small-size-radius: var(--space-xs);
  --progress-bar-spacing-size: var(--space-xs);
  --progress-bar-transition: width 0.5s ease-out;
  --progress-bar-label-color: var(--color-text);
  --progress-bar-description-color: var(--color-gray-800);
  --progress-bar-description-font-size: var(--font-size-xs);
  --progress-track-border-color: var(--color-gray-500);
  --progress-track-bg-color: var(--color-gray-200);
  /**
   * Ajax progress.
   */
  --ajax-progress-margin-horizontal: var(--space-s);
  /**
   * Breadcrumb.
   */
  --breadcrumb-height: 1.25rem;
  /**
   * Layout.
   */
  --layout-region-edit-width: min(960px, 100%);
  --layout-region-edit-extended-width: min(1088px, 100%);
  /**
   * Vertical Tabs.
   *
   * These are shared between the vertical tabs and media library.
   * @see ../components/vertical-tabs.pcss.css
   * @see ../theme/media-library.pcss.css
   */
  --vertical-tabs-margin-vertical: var(--space-s);
  --vertical-tabs-border-radius: var(--details-accordion-border-size-radius);
  --vertical-tabs-shadow: var(--details-box-shadow);
  --vertical-tabs-border-color: var(--gin-border-color);
  --vertical-tabs-border-size: 1px;
  --vertical-tabs-border: var(--vertical-tabs-border-size) solid var(--vertical-tabs-border-color);
  --vertical-tabs-menu-item-shadow-extraspace: 0.5rem;
  --vertical-tabs-menu-item--top-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -2);
  --vertical-tabs-menu-item--right-margin: calc(var(--vertical-tabs-border-size) * -1);
  --vertical-tabs-menu-item--bottom-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
  --vertical-tabs-menu-item--left-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
  --vertical-tabs-menu-separator-color: var(--color-gray-200);
  --vertical-tabs-menu-separator-size: 1px;
  --vertical-tabs-menu-width: 20em;
  --vertical-tabs-pane-width: calc(100% - var(--vertical-tabs-menu-width));
  --vertical-tabs-menu-link-focus-border-size: var(--details-summary-focus-border-size);
  --vertical-tabs-menu-link--active-border-size: 4px;
  --vertical-tabs-menu-link--active-border-color: var(--color-absolutezero);
  --vertical-tabs-menu--z-index: 0;
}

/**
 * CSS custom property definitions for the Gin migration layer.
 *
 * @todo These will be refactored into the variables above as part of
 * https://www.drupal.org/i/3582351
 */

/* cspell:ignore blinkmacsystemfont, ginter, xxxs */
:root {
  --gin-color-title: #222330;
  --gin-color-text: #222330;
  --gin-color-text-light: #545560;
  --gin-color-focus: rgb(0, 125, 250, 0.6);
  --gin-color-focus-border: rgb(0, 0, 0, 0.2);
  --gin-color-focus-neutral-rgb: rgb(0, 0, 0, 0.4);
  --gin-color-disabled: #767676;
  --gin-color-disabled-bg: #eaeaea;
  --gin-color-disabled-border: #c2c2c2;
  --gin-color-warning: #d8b234;
  --gin-color-warning-light: #efcf64;
  --gin-bg-warning: #483e1e;
  --gin-bg-warning-light: rgb(226, 151, 0, 0.08);
  --gin-color-danger: #cc3d3d;
  --gin-color-danger-lightest: #fdd9d9;
  --gin-color-danger-light: #f39b9d;
  --gin-bg-danger: #583333;
  --gin-bg-danger-light: rgb(222, 117, 96, 0.1);
  --gin-color-green: #058260;
  --gin-color-green-light: #32cea4;
  --gin-color-green-lightest: #adebdb;
  --gin-bg-green: #145242;
  --gin-bg-green-light: rgb(72, 171, 123, 0.1);
  --gin-color-info: #082538;
  --gin-color-info-light: #589ac5;
  --gin-bg-info: #122b3c;
  --gin-status-text: #626262;
  --gin-status-bg: #eee;
  --gin-status-success-text: #1d6844;
  --gin-status-success-bg: #26a76930;
  --gin-status-warning-text: #826b1f;
  --gin-status-warning-bg: rgb(226, 151, 0, 0.15);
  --gin-status-danger-text: #cc3d3d;
  --gin-status-danger-bg: rgb(222, 117, 96, 0.15);
  --gin-color-contextual: var(--gin-color-text);
  --gin-color-contextual-text: #eee;
  --gin-bg-input: #fff;
  --gin-bg-layer: #fff;
  --gin-bg-layer2: #edeff5;
  --gin-bg-layer3: #fff;
  --gin-bg-layer4: #e2e5ec;
  --gin-bg-secondary: var(--gin-bg-layer);
  --gin-bg-header: #e1eafc;
  --gin-bg-unpublished: var(--gin-bg-danger-light);
  --gin-pattern: var(--gin-border-color);
  --gin-pattern-fallback: var(--gin-bg-layer2);
  --gin-pattern-square: 0.5rem;
  --gin-font: ginter, inter, "Helvetica Neue", blinkmacsystemfont, -apple-system, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, sans-serif;
  --gin-font-size-xxs: 0.75rem;
  --gin-font-size-xs: small;
  --gin-font-size-s: 0.875rem;
  --gin-font-size: 1rem;
  --gin-font-size-m: var(--gin-font-size);
  --gin-font-size-l: 1.125rem;
  --gin-font-size-xl: 1.25rem;
  --gin-font-size-h3: 1.5rem;
  --gin-font-size-h2: 1.75rem;
  --gin-font-size-h1: 1.6rem;
  --gin-font-size-quote: 1.1em;
  --gin-font-weight-normal: 400;
  --gin-font-weight-semibold: 525;
  --gin-font-weight-bold: 575;
  --gin-font-weight-heavy: 625;
  --gin-spacing-xxxs: var(--space-xxxs);
  --gin-spacing-xxs: var(--space-xxs);
  --gin-spacing-xs: var(--space-xs);
  --gin-spacing-s: var(--space-s);
  --gin-spacing-m: var(--space-m);
  --gin-spacing-l: var(--space-l);
  --gin-spacing-xl: var(--space-xl);
  --gin-spacing-xxl: var(--space-xxl);
  --gin-spacing-xxxl: var(--space-xxxl);
  --gin-icon-color: #414247;
  --gin-icon-size-close: 20px;
  --gin-icon-size-toolbar-secondary: 17px;
  --gin-icon-size-toolbar: 17px;
  --gin-icon-size-sidebar-toggle: 21px;
  --gin-border-xxs: 0.125rem;
  --gin-border-xs: 0.25rem;
  --gin-border-s: 0.375rem;
  --gin-border-m: 0.5rem;
  --gin-border-l: 0.75rem;
  --gin-border-xl: 1rem;
  --gin-border-color: #d4d4d8;
  --gin-border-color-secondary: rgb(0, 0, 0, 0.08);
  --gin-border-color-layer: rgb(0, 0, 0, 0.08);
  --gin-border-color-layer2: #d4d4d8;
  --gin-border-color-table: rgb(0, 0, 0, 0.1);
  --gin-border-color-table-header: rgb(0, 0, 0, 0.3);
  --gin-border-color-form-element: #8e929c;
  --size-summary-border-radius: calc(var(--gin-border-m) - 1px);
  --gin-easing: cubic-bezier(0.19, 1, 0.22, 1);
  --gin-transition: 0.15s var(--gin-easing);
  --gin-transition-fast: 0.3s var(--gin-easing);
  /* stylelint-disable-next-line color-function-notation */
  --gin-shadow-l1: 0 1px 2px rgb(20 45 82 / 0.02), 0 3px 4px rgb(20 45 82 / 0.03), 0 5px 8px rgb(20 45 82 / 0.04);
  /* stylelint-disable-next-line color-function-notation */
  --gin-shadow-l2: 0 1px 2px rgb(20 45 82 / 0.02), 0 3px 4px rgb(20 45 82 / 0.03), 0 5px 8px rgb(20 45 82 / 0.04), 0 20px 24px rgb(20 45 82 / 0.12);
  --gin-height-sticky: 60px;
  --gin-toolbar-width-collapsed: 66px;
  --gin-toolbar-width: 256px;
  --gin-toolbar-height: 0px;
  --gin-toolbar-secondary-height: 0px;
  --gin-toolbar-bg-level2: #edeff5;
  --gin-toolbar-bg-level3: rgb(44, 45, 47, 0.05);
  --gin-toolbar-y-offset: 0px;
  --gin-toolbar-x-offset: 0px;
  --gin-scroll-offset: 0px;
  --gin-sticky-offset: 0px;
  --gin-sidebar-small-width: 320px;
  --gin-sidebar-min-width: 240px;
  --gin-sidebar-width: 320px;
  --gin-sidebar-max-width: 560px;
  --gin-sidebar-offset: var(--gin-sidebar-width);
  --gin-switch: #26a769;
  --gin-shadow-button: #0003;
  --gin-color-button-text: #fff;
  --gin-offset-x: var(--gin-toolbar-x-offset);
  --gin-offset-y: calc(var(--gin-toolbar-y-offset) + var(--gin-sticky-offset));
  --gin-link-decoration-style: dotted;
  --gin-max-line-length: 80ch;
  --input-line-height: var(--gin-spacing-l);
  --input-padding-horizontal: var(--gin-spacing-s);
  --input-padding-vertical: var(--gin-spacing-xs);
  --gin-tooltip-bg: #232429;
  --jui-dialog-z-index: 1260;

  @media (--admin-medium) {
    --gin-font-size-h1: 1.8125rem;
    --gin-font-size-quote: 1.2em;
    --gin-icon-size-toolbar: 20px;
  }

  @media (--admin-widest) {
    --gin-font-size-h1: 2.125rem;
  }

  @media (--admin-large) {
    --gin-sticky-offset: var(--gin-height-sticky);
  }

  @media (--admin-wide) {
    --gin-sidebar-width: 360px;
  }
}

:root[data-gin-layout-density="small"],
[data-gin-layout-density="small"] {
  --gin-spacing-density-xxs: 0.15625rem;
  --gin-spacing-density-xs: 0.3125rem;
  --gin-spacing-density-s: 0.46875rem;
  --gin-spacing-density-m: 0.625rem;
  --gin-spacing-density-l: 0.9375rem;
  --gin-spacing-density-xl: 1.25rem;
  --gin-spacing-density-xxl: 1.875rem;
  --gin-spacing-density-xxxl: 2.5rem;
}

:root[data-gin-layout-density="medium"],
[data-gin-layout-density="medium"] {
  --gin-spacing-density-xxs: 0.1875rem;
  --gin-spacing-density-xs: 0.375rem;
  --gin-spacing-density-s: 0.5625rem;
  --gin-spacing-density-m: 0.75rem;
  --gin-spacing-density-l: 1.125rem;
  --gin-spacing-density-xl: 1.5rem;
  --gin-spacing-density-xxl: 2.25rem;
  --gin-spacing-density-xxxl: 3rem;
}

:root {
  --gin-spacing-density-xxs: 0.25rem;
  --gin-spacing-density-xs: 0.5rem;
  --gin-spacing-density-s: 0.75rem;
  --gin-spacing-density-m: 1rem;
  --gin-spacing-density-l: 1.5rem;
  --gin-spacing-density-xl: 2rem;
  --gin-spacing-density-xxl: 3rem;
  --gin-spacing-density-xxxl: 4rem;
}

.gin--dark-mode {
  --gin-color-title: #fff;
  --gin-color-text: #d2d3d3;
  --gin-color-text-light: #9e9fa0;
  --gin-shadow-button: rgba(#111, 0.9);
  --gin-color-button-text: #111;
  --gin-color-focus: rgb(81, 168, 255);
  --gin-color-focus-border: rgb(0, 0, 0, 0.8);
  --gin-color-focus-neutral-rgb: rgb(255, 255, 255, 0.8);
  --gin-color-disabled: #919191;
  --gin-color-disabled-border: #646464;
  --gin-color-disabled-bg: #47474c;
  --gin-color-warning: #dec15f;
  --gin-bg-warning-light: rgb(222, 193, 95, 0.1);
  --gin-color-danger: #ce6060;
  --gin-color-danger-lightest: #483439;
  --gin-color-green: #32cea4;
  --gin-color-info: #559bca;
  --gin-bg-input: var(--gin-bg-layer2);
  --gin-bg-app: #1b1b1d;
  --gin-bg-layer: #2a2a2d;
  --gin-bg-layer2: #3b3b3f;
  --gin-bg-layer3: #47474c;
  --gin-bg-layer4: #19191b;
  --gin-bg-secondary: var(--gin-bg-app);
  --gin-bg-unpublished: var(--gin-bg-warning-light);
  --gin-color-contextual: var(--gin-bg-layer3);
  --gin-border-color: #43454a;
  --gin-border-color-secondary: rgb(255, 255, 255, 0.075);
  --gin-border-color-layer: rgb(0, 0, 0, 0.05);
  --gin-border-color-layer2: #76777b;
  --gin-border-color-table: #43454a;
  --gin-border-color-table-header: rgb(255, 255, 255, 0.4);
  --gin-border-color-form-element: var(--gin-border-color-layer2);
  --gin-bg-header: #1b1b1d;
  --gin-switch: var(--gin-color-primary);
  --gin-status-text: #c3cbd0;
  --gin-status-bg: rgb(255, 255, 255, 0.12);
  --gin-status-success-text: #8bd3b1;
  --gin-status-success-bg: #26a76940;
  --gin-status-warning-text: #e8d185;
  --gin-status-warning-bg: rgb(226, 151, 0, 0.15);
  --gin-status-danger-text: #e69e9e;
  --gin-status-danger-bg: rgb(222, 117, 96, 0.15);
  /* stylelint-disable-next-line color-function-notation */
  --gin-shadow-l1: 0 1px 2px rgb(0 0 0 / 0.02), 0 3px 4px rgb(0 0 0 / 0.03), 0 5px 8px rgb(0 0 0 / 0.04);
  /* stylelint-disable-next-line color-function-notation */
  --gin-shadow-l2: 0 1px 2px rgb(0 0 0 / 0.02), 0 3px 4px rgb(0 0 0 / 0.03), 0 5px 8px rgb(0 0 0 / 0.04), 0 20px 24px rgb(0 0 0 / 0.12);
  --gin-icon-color: #888;
  --gin-pattern-fallback: var(--gin-bg-layer2);
  --gin-pattern: var(--gin-border-color);
  --gin-tooltip-bg: var(--gin-bg-layer3);
}

@media (forced-colors: active) {
  :root {
    --gin-icon-color: CanvasText;
  }
}

.entity-meta {
  --entity-meta-color-bg: transparent;
  --entity-meta-border-color: var(--gin-border-color);
}

.accordion {
  --accordion-bg-color: transparent;
  --accordion-border-color: var(--gin-border-color);
}

File

core/themes/default_admin/css/base/variables.pcss.css

@import "media-queries.pcss.css";

/* cspell:ignore xxxs */
:root {
  /*
   * Color Palette.
   */
  --color-absolutezero: var(--color-blue-600);
  --color-white: #fff;
  --color-text: var(--gin-color-text);
  --color-text-light: var(--color-gray-500);
  --color-gray-050-o-40: rgb(243, 244, 249, 0.4);
  /* Secondary. */
  --color-gray-200-o-80: rgb(212, 212, 218, 0.8);
  --color-maximumred: var(--color-red-500);
  --color-sunglow: #ffd23f;
  --color-sunglow-shaded: #977405;
  --color-lightninggreen: #26a769; /* Claro focus ring */
  --color-focus: var(--gin-color-focus);
  /* Variations. */
  --color-absolutezero-hover: var(--color-blue-650); /* 5% darker than base. */
  --color-absolutezero-active: var(--color-blue-700); /* 10% darker than base. */
  --color-maximumred-hover: var(--color-red-550); /* 5% darker than base. */
  --color-maximumred-active: var(--color-red-600); /* 10% darker than base. */
  --color-bgblue-hover: var(--color-blue-020); /* 2% darker than base. */
  --color-bgblue-active: var(--color-blue-050); /* 5% darker than base. */
  --color-bgred-hover: var(--color-red-020); /* 5% darker than base. */
  --color-bgred-active: var(--color-red-050); /* 10% darker than base. */
  /* Gray variations. */
  --color-gray: #232429;
  --color-gray-900: #393a3f;
  --color-gray-800: #55565b;
  --color-gray-700: #75767b;
  --color-gray-600: #828388;
  --color-gray-500: #919297;
  --color-gray-400: #adaeb3;
  --color-gray-300: #c1c2c7;
  --color-gray-200: #d3d4d9;
  --color-gray-100: #dedfe4;
  --color-gray-050: #f3f4f9;
  --color-gray-025: #f9faff;
  /* Blue variations. */
  --color-blue: var(--color-blue-600);
  --color-blue-900: #000f33;
  --color-blue-800: #001f66;
  --color-blue-700: #002e9a;
  --color-blue-650: #0036b1;
  --color-blue-600: #003ecc;
  --color-blue-500: #004eff;
  --color-blue-400: #3371ff;
  --color-blue-300: #6694ff;
  --color-blue-200: #99b8ff;
  --color-blue-100: #ccdbff;
  --color-blue-070: #dbe6ff;
  --color-blue-050: #e5edff;
  --color-blue-020: #f5f8ff;
  /* Red variations. */
  --color-red: var(--color-red-500);
  --color-red-900: #2c0707;
  --color-red-800: #580e0e;
  --color-red-700: #841515;
  --color-red-600: #b01c1c;
  --color-red-550: #c61f1f;
  --color-red-500: #dc2323;
  --color-red-400: #e34f4f;
  --color-red-300: #ea7b7b;
  --color-red-200: #f1a7a7;
  --color-red-100: #f8d3d3;
  --color-red-070: #fae0e0;
  --color-red-050: #fce9e9;
  --color-red-020: #fdf5f5;

  /*
   * Base.
   */
  --color-fg: var(--color-text);
  --color-bg: var(--color-white);
  --color-link: var(--color-absolutezero);
  --color-link-hover: var(--color-absolutezero-hover);
  --color-link-active: var(--color-absolutezero-active);

  /*
   * Typography.
   */
  --font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --font-family-serif: "Times New Roman", times, serif;
  --line-height: 1.5;
  --line-height-heading: 1.3;
  --line-height-form-label: calc(18rem / 16); /* 18px */
  --font-size-base: 1rem; /* 1rem = 16px if font root is 100% ands browser defaults are used. */
  --font-size-xl: 2.25rem; /* ~36px */
  --font-size-h1: 2.027rem; /* ~32px */
  --font-size-h2: 1.802rem; /* ~29px */
  --font-size-h3: 1.602rem; /* ~26px */
  --font-size-h4: 1.424rem; /* ~23px */
  --font-size-h5: 1.266rem; /* ~20px */
  --font-size-h6: 1.125rem; /* 18px */
  --font-size-s: 0.875rem; /* 14px */
  --font-size-xs: small; /* 13px */
  --font-size-xxs: 0.75rem; /* 12px */
  --font-size-label: var(--font-size-s);
  --font-size-description: var(--font-size-xs);
  --font-weight-normal: 400;
  --font-weight-semibold: 525;
  --font-weight-bold: 575;
  --font-weight-heavy: 625;
  /**
   * Spaces.
   */
  --space-xxxl: 4rem; /* 4 * 16px = 64px */
  --space-xxl: 3rem; /* 3 * 16px = 48px */
  --space-xl: 2rem; /* 2 * 16px = 32px */
  --space-l: 1.5rem; /* 1.5 * 16px = 24px */
  --space-m: 1rem; /* 1 * 16px = 16px */
  --space-s: 0.75rem; /* 0.75 * 16px = 12px */
  --space-xs: 0.5rem; /* 0.5 * 16px = 8px */
  --space-xxs: 0.25rem; /* 0.25 * 16px = 4px */
  --space-xxxs: 0.125rem; /* 0.125 * 16px = 2px */
  /*
   * Common.
   */
  --easing: cubic-bezier(0.19, 1, 0.22, 1);
  --speed-transition: 0.15s;
  --transition: all var(--speed-transition) var(--easing);
  --base-border-radius: 2px;
  --focus-border-size: calc(var(--base-border-radius) - 1px);
  --focus-border-offset-size: 0px;
  --outline-size: 4px;
  --focus-outline: var(--outline-size) solid var(--gin-color-focus);
  --focus-box-shadow: 0 0 0 var(--focus-border-offset-size) var(--color-white), 0 0 0 calc(var(--focus-border-size) + var(--focus-border-offset-size)) var(--color-focus);
  --focus-ring: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus);
  --focus-ring-focused: 0 0 0 1px var(--app-bg-color), 0 0 0 4px var(--color-focus), inset 0 0 0 var(--input-border-size) var(--input--hover-border-color);
  /**
   * Shadows.
   */
  --shadow-z3: 0 14px 30px rgb(0, 0, 0, 0.1);
  /*
   * Inputs.
   */
  --input-fg-color: var(--color-fg);
  --input-bg-color: var(--color-bg);
  --input-fg-color--description: var(--color-gray-800);
  --input-fg-color--placeholder: var(--color-gray-700);
  --input-border-color: var(--color-gray-500);
  --input--hover-border-color: var(--color-text);
  --input--focus-border-color: var(--color-absolutezero);
  --input--error-color: var(--color-maximumred);
  --input--error-border-color: var(--color-maximumred);
  --input--disabled-color: rgb(84, 85, 96, 0.6); /* Davy's gray with 0.6 opacity. */
  --input--disabled-fg-color: var(--color-gray-800);
  --input--disabled-bg-color: #f2f2f3; /* Light gray with 0.3 opacity on white bg. */
  --input--disabled-border-color: #bababf; /* Old silver with 0.5 opacity on white bg. */
  --input--disabled-border-opacity: 0.5;
  --input-border-radius-size: 0.125rem; /* (1/8)em ~ 2px */
  --input-border-size: 1px; /* (1/16)em ~ 1px */
  --input--error-border-size: 2px;
  --input-padding-vertical: calc(var(--space-s) - var(--input-border-size));
  --input-padding-horizontal: calc(var(--space-m) - var(--input-border-size));
  --input-font-size: var(--font-size-base);
  --input-line-height: var(--space-l);
  --input-padding-vertical--small: calc(var(--space-xs) - (var(--input-border-size) * 2));
  --input-padding-horizontal--small: calc(var(--space-m) - var(--input-border-size));
  --input-font-size--small: var(--font-size-xs);
  --input-line-height--small: 1.3125rem;
  --input--extrasmall-padding-vertical: calc(0.15rem - var(--input-border-size));
  --input--extrasmall-padding-horizontal: calc(var(--space-xs) - var(--input-border-size));
  --input--extrasmall-font-size: var(--font-size-s);
  --input--extrasmall-line-height: calc(var(--space-m) + 0.2rem); /* Font size is too big to use 1rem for extrasmall line-height */
  --input--required-mark-size: 0.4375rem; /* 7px inside the form element label. */
  --input--label-spacing: 1.6875rem; /* 8px with the checkbox width of 19px */
  /*
   * Details.
   */
  --details-border-color: var(--color-gray-100);
  --details-summary-shadow-color: var(--color-focus);
  --details-summary-focus-border-size: var(--focus-border-size);
  --details-desktop-wrapper-padding-start: calc(var(--space-m) + var(--space-s) + var(--space-xs));
  --details-box-shadow: 0 2px 4px rgb(0, 0, 0, 0.1);
  --details-border-size: 1px;
  --details-border-size-radius: 2px;
  --details-accordion-border-size-radius: var(--base-border-radius);
  --details-spread-box-shadow-radius: 2px;
  --details-bg-color-transition-duration: 0.12s;
  --details-box-shadow-transition-duration: 0.2s;
  --details-transform-transition-duration: 0.12s;
  --details-line-height: 1.295rem;
  /**
   * Buttons.
   */
  --button-font-size: var(--font-size-s);
  --button-font-weight: var(--font-weight-semibold);
  --button--focus-border-color: var(--color-blue-300);
  --button-border-radius-size: var(--base-border-radius);
  --button-fg-color: var(--color-gray-900);
  --button-bg-color: var(--color-gray-050);
  --button-border-color: var(--color-gray-200);
  --button--hover-bg-color: var(--color-gray-100);
  --button--hover-border-color: var(--color-gray-300);
  --button--active-bg-color: var(--color-gray-200);
  --button--active-border-color: var(--color-gray-400);
  --button--disabled-bg-color: #ebebed;
  --button--disabled-fg-color: var(--color-gray-500);
  --button-fg-color--primary: var(--gin-color-button-text);
  --button-bg-color--primary: var(--accent-color-500);
  --button--hover-bg-color--primary: var(--accent-color-550);
  --button--active-bg-color--primary: var(--accent-color-600);
  --button--focus-bg-color--primary: var(--button-bg-color--primary);
  --button--disabled-bg-color--primary: var(--color-gray-200);
  --button--disabled-fg-color--primary: var(--color-gray-600);
  --button-fg-color--danger: var(--gin-color-button-text);
  --button-bg-color--danger: var(--color-maximumred);
  --button--hover-bg-color--danger: var(--color-maximumred-hover);
  --button--active-bg-color--danger: var(--color-maximumred-active);
  --dropbutton-widget-z-index: 100;
  /**
   * jQuery.UI dropdown.
   */
  --jui-dropdown-fg-color: var(--color-gray-800);
  --jui-dropdown-bg-color: var(--color-white);
  --jui-dropdown--active-fg-color: var(--color-white);
  --jui-dropdown--active-bg-color: var(--color-absolutezero);
  --jui-dropdown-border-color: rgb(216, 217, 224, 0.8); /* Light gray with 0.8 opacity. */
  --jui-dropdown-shadow-color: rgb(34, 35, 48, 0.1); /* Text color with 0.1 opacity. */
  /**
   * jQuery.UI dialog.
   */
  --jui-dialog-title-color: var(--color-white);
  --jui-dialog-title-bg-color: var(--color-text);
  --jui-dialog-title-font-size: var(--font-size-h4);
  --jui-dialog-close-button-size: calc(var(--space-m) * 2);
  --jui-dialog-close-button-border-radius: 50%;
  --jui-dialog-close-button-reserved-space: calc(var(--space-m) * 4);
  --jui-dialog-off-canvas-close-button-reserved-space: calc(var(--space-m) * 3);
  --jui-dialog-border-radius: 4px;
  --jui-dialog-box-shadow: 0 0 var(--space-m) calc(var(--space-m) / -4) var(--color-text);
  --jui-dialog--focus-outline: 2px dotted transparent;
  --jui-dialog--focus-box-shadow: 0 0 0 3px var(--color-focus);
  --jui-dialog-z-index: 1260;
  --jui-dialog-off-canvas-z-index: 501;
  /**
   * Progress bar.
   */
  --progress-bar-border-size: 1px;
  --progress-bar-small-size: calc(var(--space-xs) - (2 * var(--progress-bar-border-size)));
  --progress-bar-small-size-radius: var(--space-xs);
  --progress-bar-spacing-size: var(--space-xs);
  --progress-bar-transition: width 0.5s ease-out;
  --progress-bar-label-color: var(--color-text);
  --progress-bar-description-color: var(--color-gray-800);
  --progress-bar-description-font-size: var(--font-size-xs);
  --progress-track-border-color: var(--color-gray-500);
  --progress-track-bg-color: var(--color-gray-200);
  /**
   * Ajax progress.
   */
  --ajax-progress-margin-horizontal: var(--space-s);
  /**
   * Breadcrumb.
   */
  --breadcrumb-height: 1.25rem;
  /**
   * Layout.
   */
  --layout-region-edit-width: min(960px, 100%);
  --layout-region-edit-extended-width: min(1088px, 100%);
  /**
   * Vertical Tabs.
   *
   * These are shared between the vertical tabs and media library.
   * @see ../components/vertical-tabs.pcss.css
   * @see ../theme/media-library.pcss.css
   */
  --vertical-tabs-margin-vertical: var(--space-s);
  --vertical-tabs-border-radius: var(--details-accordion-border-size-radius);
  --vertical-tabs-shadow: var(--details-box-shadow);
  --vertical-tabs-border-color: var(--gin-border-color);
  --vertical-tabs-border-size: 1px;
  --vertical-tabs-border: var(--vertical-tabs-border-size) solid var(--vertical-tabs-border-color);
  --vertical-tabs-menu-item-shadow-extraspace: 0.5rem;
  --vertical-tabs-menu-item--top-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -2);
  --vertical-tabs-menu-item--right-margin: calc(var(--vertical-tabs-border-size) * -1);
  --vertical-tabs-menu-item--bottom-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
  --vertical-tabs-menu-item--left-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
  --vertical-tabs-menu-separator-color: var(--color-gray-200);
  --vertical-tabs-menu-separator-size: 1px;
  --vertical-tabs-menu-width: 20em;
  --vertical-tabs-pane-width: calc(100% - var(--vertical-tabs-menu-width));
  --vertical-tabs-menu-link-focus-border-size: var(--details-summary-focus-border-size);
  --vertical-tabs-menu-link--active-border-size: 4px;
  --vertical-tabs-menu-link--active-border-color: var(--color-absolutezero);
  --vertical-tabs-menu--z-index: 0;
}

/**
 * CSS custom property definitions for the Gin migration layer.
 *
 * @todo These will be refactored into the variables above as part of
 * https://www.drupal.org/i/3582351
 */

/* cspell:ignore blinkmacsystemfont, ginter, xxxs */
:root {
  --gin-color-title: #222330;
  --gin-color-text: #222330;
  --gin-color-text-light: #545560;
  --gin-color-focus: rgb(0, 125, 250, 0.6);
  --gin-color-focus-border: rgb(0, 0, 0, 0.2);
  --gin-color-focus-neutral-rgb: rgb(0, 0, 0, 0.4);
  --gin-color-disabled: #767676;
  --gin-color-disabled-bg: #eaeaea;
  --gin-color-disabled-border: #c2c2c2;
  --gin-color-warning: #d8b234;
  --gin-color-warning-light: #efcf64;
  --gin-bg-warning: #483e1e;
  --gin-bg-warning-light: rgb(226, 151, 0, 0.08);
  --gin-color-danger: #cc3d3d;
  --gin-color-danger-lightest: #fdd9d9;
  --gin-color-danger-light: #f39b9d;
  --gin-bg-danger: #583333;
  --gin-bg-danger-light: rgb(222, 117, 96, 0.1);
  --gin-color-green: #058260;
  --gin-color-green-light: #32cea4;
  --gin-color-green-lightest: #adebdb;
  --gin-bg-green: #145242;
  --gin-bg-green-light: rgb(72, 171, 123, 0.1);
  --gin-color-info: #082538;
  --gin-color-info-light: #589ac5;
  --gin-bg-info: #122b3c;
  --gin-status-text: #626262;
  --gin-status-bg: #eee;
  --gin-status-success-text: #1d6844;
  --gin-status-success-bg: #26a76930;
  --gin-status-warning-text: #826b1f;
  --gin-status-warning-bg: rgb(226, 151, 0, 0.15);
  --gin-status-danger-text: #cc3d3d;
  --gin-status-danger-bg: rgb(222, 117, 96, 0.15);
  --gin-color-contextual: var(--gin-color-text);
  --gin-color-contextual-text: #eee;
  --gin-bg-input: #fff;
  --gin-bg-layer: #fff;
  --gin-bg-layer2: #edeff5;
  --gin-bg-layer3: #fff;
  --gin-bg-layer4: #e2e5ec;
  --gin-bg-secondary: var(--gin-bg-layer);
  --gin-bg-header: #e1eafc;
  --gin-bg-unpublished: var(--gin-bg-danger-light);
  --gin-pattern: var(--gin-border-color);
  --gin-pattern-fallback: var(--gin-bg-layer2);
  --gin-pattern-square: 0.5rem;
  --gin-font: ginter, inter, "Helvetica Neue", blinkmacsystemfont, -apple-system, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, sans-serif;
  --gin-font-size-xxs: 0.75rem;
  --gin-font-size-xs: small;
  --gin-font-size-s: 0.875rem;
  --gin-font-size: 1rem;
  --gin-font-size-m: var(--gin-font-size);
  --gin-font-size-l: 1.125rem;
  --gin-font-size-xl: 1.25rem;
  --gin-font-size-h3: 1.5rem;
  --gin-font-size-h2: 1.75rem;
  --gin-font-size-h1: 1.6rem;
  --gin-font-size-quote: 1.1em;
  --gin-font-weight-normal: 400;
  --gin-font-weight-semibold: 525;
  --gin-font-weight-bold: 575;
  --gin-font-weight-heavy: 625;
  --gin-spacing-xxxs: var(--space-xxxs);
  --gin-spacing-xxs: var(--space-xxs);
  --gin-spacing-xs: var(--space-xs);
  --gin-spacing-s: var(--space-s);
  --gin-spacing-m: var(--space-m);
  --gin-spacing-l: var(--space-l);
  --gin-spacing-xl: var(--space-xl);
  --gin-spacing-xxl: var(--space-xxl);
  --gin-spacing-xxxl: var(--space-xxxl);
  --gin-icon-color: #414247;
  --gin-icon-size-close: 20px;
  --gin-icon-size-toolbar-secondary: 17px;
  --gin-icon-size-toolbar: 17px;
  --gin-icon-size-sidebar-toggle: 21px;
  --gin-border-xxs: 0.125rem;
  --gin-border-xs: 0.25rem;
  --gin-border-s: 0.375rem;
  --gin-border-m: 0.5rem;
  --gin-border-l: 0.75rem;
  --gin-border-xl: 1rem;
  --gin-border-color: #d4d4d8;
  --gin-border-color-secondary: rgb(0, 0, 0, 0.08);
  --gin-border-color-layer: rgb(0, 0, 0, 0.08);
  --gin-border-color-layer2: #d4d4d8;
  --gin-border-color-table: rgb(0, 0, 0, 0.1);
  --gin-border-color-table-header: rgb(0, 0, 0, 0.3);
  --gin-border-color-form-element: #8e929c;
  --size-summary-border-radius: calc(var(--gin-border-m) - 1px);
  --gin-easing: cubic-bezier(0.19, 1, 0.22, 1);
  --gin-transition: 0.15s var(--gin-easing);
  --gin-transition-fast: 0.3s var(--gin-easing);
  /* stylelint-disable-next-line color-function-notation */
  --gin-shadow-l1: 0 1px 2px rgb(20 45 82 / 0.02), 0 3px 4px rgb(20 45 82 / 0.03), 0 5px 8px rgb(20 45 82 / 0.04);
  /* stylelint-disable-next-line color-function-notation */
  --gin-shadow-l2: 0 1px 2px rgb(20 45 82 / 0.02), 0 3px 4px rgb(20 45 82 / 0.03), 0 5px 8px rgb(20 45 82 / 0.04), 0 20px 24px rgb(20 45 82 / 0.12);
  --gin-height-sticky: 60px;
  --gin-toolbar-width-collapsed: 66px;
  --gin-toolbar-width: 256px;
  --gin-toolbar-height: 0px;
  --gin-toolbar-secondary-height: 0px;
  --gin-toolbar-bg-level2: #edeff5;
  --gin-toolbar-bg-level3: rgb(44, 45, 47, 0.05);
  --gin-toolbar-y-offset: 0px;
  --gin-toolbar-x-offset: 0px;
  --gin-scroll-offset: 0px;
  --gin-sticky-offset: 0px;
  --gin-sidebar-small-width: 320px;
  --gin-sidebar-min-width: 240px;
  --gin-sidebar-width: 320px;
  --gin-sidebar-max-width: 560px;
  --gin-sidebar-offset: var(--gin-sidebar-width);
  --gin-switch: #26a769;
  --gin-shadow-button: #0003;
  --gin-color-button-text: #fff;
  --gin-offset-x: var(--gin-toolbar-x-offset);
  --gin-offset-y: calc(var(--gin-toolbar-y-offset) + var(--gin-sticky-offset));
  --gin-link-decoration-style: dotted;
  --gin-max-line-length: 80ch;
  --input-line-height: var(--gin-spacing-l);
  --input-padding-horizontal: var(--gin-spacing-s);
  --input-padding-vertical: var(--gin-spacing-xs);
  --gin-tooltip-bg: #232429;
  --jui-dialog-z-index: 1260;

  @media (--admin-medium) {
    --gin-font-size-h1: 1.8125rem;
    --gin-font-size-quote: 1.2em;
    --gin-icon-size-toolbar: 20px;
  }

  @media (--admin-widest) {
    --gin-font-size-h1: 2.125rem;
  }

  @media (--admin-large) {
    --gin-sticky-offset: var(--gin-height-sticky);
  }

  @media (--admin-wide) {
    --gin-sidebar-width: 360px;
  }
}

:root[data-gin-layout-density="small"],
[data-gin-layout-density="small"] {
  --gin-spacing-density-xxs: 0.15625rem;
  --gin-spacing-density-xs: 0.3125rem;
  --gin-spacing-density-s: 0.46875rem;
  --gin-spacing-density-m: 0.625rem;
  --gin-spacing-density-l: 0.9375rem;
  --gin-spacing-density-xl: 1.25rem;
  --gin-spacing-density-xxl: 1.875rem;
  --gin-spacing-density-xxxl: 2.5rem;
}

:root[data-gin-layout-density="medium"],
[data-gin-layout-density="medium"] {
  --gin-spacing-density-xxs: 0.1875rem;
  --gin-spacing-density-xs: 0.375rem;
  --gin-spacing-density-s: 0.5625rem;
  --gin-spacing-density-m: 0.75rem;
  --gin-spacing-density-l: 1.125rem;
  --gin-spacing-density-xl: 1.5rem;
  --gin-spacing-density-xxl: 2.25rem;
  --gin-spacing-density-xxxl: 3rem;
}

:root {
  --gin-spacing-density-xxs: 0.25rem;
  --gin-spacing-density-xs: 0.5rem;
  --gin-spacing-density-s: 0.75rem;
  --gin-spacing-density-m: 1rem;
  --gin-spacing-density-l: 1.5rem;
  --gin-spacing-density-xl: 2rem;
  --gin-spacing-density-xxl: 3rem;
  --gin-spacing-density-xxxl: 4rem;
}

.gin--dark-mode {
  --gin-color-title: #fff;
  --gin-color-text: #d2d3d3;
  --gin-color-text-light: #9e9fa0;
  --gin-shadow-button: rgba(#111, 0.9);
  --gin-color-button-text: #111;
  --gin-color-focus: rgb(81, 168, 255);
  --gin-color-focus-border: rgb(0, 0, 0, 0.8);
  --gin-color-focus-neutral-rgb: rgb(255, 255, 255, 0.8);
  --gin-color-disabled: #919191;
  --gin-color-disabled-border: #646464;
  --gin-color-disabled-bg: #47474c;
  --gin-color-warning: #dec15f;
  --gin-bg-warning-light: rgb(222, 193, 95, 0.1);
  --gin-color-danger: #ce6060;
  --gin-color-danger-lightest: #483439;
  --gin-color-green: #32cea4;
  --gin-color-info: #559bca;
  --gin-bg-input: var(--gin-bg-layer2);
  --gin-bg-app: #1b1b1d;
  --gin-bg-layer: #2a2a2d;
  --gin-bg-layer2: #3b3b3f;
  --gin-bg-layer3: #47474c;
  --gin-bg-layer4: #19191b;
  --gin-bg-secondary: var(--gin-bg-app);
  --gin-bg-unpublished: var(--gin-bg-warning-light);
  --gin-color-contextual: var(--gin-bg-layer3);
  --gin-border-color: #43454a;
  --gin-border-color-secondary: rgb(255, 255, 255, 0.075);
  --gin-border-color-layer: rgb(0, 0, 0, 0.05);
  --gin-border-color-layer2: #76777b;
  --gin-border-color-table: #43454a;
  --gin-border-color-table-header: rgb(255, 255, 255, 0.4);
  --gin-border-color-form-element: var(--gin-border-color-layer2);
  --gin-bg-header: #1b1b1d;
  --gin-switch: var(--gin-color-primary);
  --gin-status-text: #c3cbd0;
  --gin-status-bg: rgb(255, 255, 255, 0.12);
  --gin-status-success-text: #8bd3b1;
  --gin-status-success-bg: #26a76940;
  --gin-status-warning-text: #e8d185;
  --gin-status-warning-bg: rgb(226, 151, 0, 0.15);
  --gin-status-danger-text: #e69e9e;
  --gin-status-danger-bg: rgb(222, 117, 96, 0.15);
  /* stylelint-disable-next-line color-function-notation */
  --gin-shadow-l1: 0 1px 2px rgb(0 0 0 / 0.02), 0 3px 4px rgb(0 0 0 / 0.03), 0 5px 8px rgb(0 0 0 / 0.04);
  /* stylelint-disable-next-line color-function-notation */
  --gin-shadow-l2: 0 1px 2px rgb(0 0 0 / 0.02), 0 3px 4px rgb(0 0 0 / 0.03), 0 5px 8px rgb(0 0 0 / 0.04), 0 20px 24px rgb(0 0 0 / 0.12);
  --gin-icon-color: #888;
  --gin-pattern-fallback: var(--gin-bg-layer2);
  --gin-pattern: var(--gin-border-color);
  --gin-tooltip-bg: var(--gin-bg-layer3);
}

@media (forced-colors: active) {
  :root {
    --gin-icon-color: CanvasText;
  }
}

.entity-meta {
  --entity-meta-color-bg: transparent;
  --entity-meta-border-color: var(--gin-border-color);
}

.accordion {
  --accordion-bg-color: transparent;
  --accordion-border-color: var(--gin-border-color);
}