/**
 * Codex Design Tokens v1.22.0
 * Design System for Wikimedia
 * See https://doc.wikimedia.org/codex/latest/design-tokens/overview.html
 */

:root {
  --color-base: #eaecf0;
  --color-base--hover: #f8f9fa;
  --color-emphasized: #f8f9fa;
  --color-subtle: #a2a9b1;
  --color-disabled: #54595d;
  --color-disabled-emphasized: #72777d;
  --color-inverted: #101418;
  --color-progressive: #88a3e8; /* 'Progressive' Color and states */
  --color-progressive--hover: #b0c1f0;
  --color-progressive--active: #cbd6f6;
  --color-destructive: #fd7865; /* 'Destructive' Color and states */
  --color-destructive--hover: #fea898;
  --color-destructive--active: #ffc8bd;
  --color-visited: #a799cd; /* 'Visited' color. In combination with progressive. Used for default links. */
  --color-visited--hover: #c5b9dd;
  --color-visited--active: #d9d0e9;
  --color-destructive--visited: #c99391; /* Red link 'Visited' color. Used for visited red links. */
  --color-destructive--visited--hover: #dcb5b3;
  --color-destructive--visited--active: #e8cecd;
  --color-error: #fd7865;
  --color-error--hover: #fea898;
  --color-error--active: #ffc8bd;
  --color-warning: #ca982e;
  --color-success: #2cb491;
  --color-notice: #a2a9b1;
  --color-content-added: #80cdb3;
  --color-content-removed: #fd7865;
  --color-base--subtle: #a2a9b1;
  --box-shadow-color-base: #72777d;
  --box-shadow-color-progressive--focus: #6485d1;
  --box-shadow-color-progressive-selected: #88a3e8;
  --box-shadow-color-progressive-selected--hover: #b0c1f0;
  --box-shadow-color-progressive-selected--active: #cbd6f6;
  --box-shadow-color-destructive--focus: #6485d1;
  --box-shadow-color-inverted: #000;
  --box-shadow-color-alpha-base: rgba( 0, 0, 0, 0.87 );
  --mix-blend-mode-blend: screen;
  --background-color-base: #101418; /* Background Colors for static elements (for page layout, sections, etc.) from here on. */
  --background-color-neutral: #27292d;
  --background-color-neutral-subtle: #202122;
  --background-color-interactive: #27292d;
  --background-color-interactive--hover: #404244;
  --background-color-interactive--active: #54595d;
  --background-color-interactive-subtle: #202122;
  --background-color-interactive-subtle--hover: #27292d;
  --background-color-interactive-subtle--active: #404244;
  --background-color-disabled: #404244; /* Components like Buttons, Checkboxes, Radios, ProgressBars…. */
  --background-color-disabled-subtle: #27292d; /* Components like TextInputs, Selects…. */
  --background-color-inverted: #f8f9fa;
  --background-color-progressive--focus: #6485d1;
  --background-color-progressive-subtle: #1b223d;
  --background-color-progressive-subtle--hover: #233566;
  --background-color-progressive-subtle--active: #3056a9;
  --background-color-destructive--focus: #6485d1;
  --background-color-destructive-subtle: #3c1a13;
  --background-color-destructive-subtle--hover: #612419;
  --background-color-destructive-subtle--active: #9f3526;
  --background-color-error-subtle: #3c1a13;
  --background-color-error-subtle--hover: #612419;
  --background-color-error-subtle--active: #9f3526;
  --background-color-warning-subtle: #2d2212;
  --background-color-success-subtle: #132821;
  --background-color-notice-subtle: #27292d;
  --background-color-content-added: #233566;
  --background-color-content-removed: #453217;
  --background-color-backdrop-light: rgba( 0, 0, 0, 0.65 ); /* Backdrop is the term used by CSS Fullscreen API and is used to dim the background when a modal Dialog is open. Also known as overlay mask. */
  --background-color-backdrop-dark: rgba( 255, 255, 255, 0.65 );
  --border-color-base: #72777d;
  --border-color-subtle: #54595d;
  --border-color-muted: #404244;
  --border-color-interactive--hover: #a2a9b1;
  --border-color-interactive--active: #c8ccd1;
  --border-color-disabled: #54595d;
  --border-color-inverted: #101418;
  --border-color-progressive--hover: #88a3e8;
  --border-color-progressive--active: #b0c1f0;
  --border-color-progressive--focus: #6485d1;
  --border-color-destructive--hover: #fd7865;
  --border-color-destructive--active: #fea898;
  --border-color-destructive--focus: #6485d1;
  --border-color-error--hover: #fd7865;
  --border-color-error--active: #fea898;
  --border-color-content-added: #233566;
  --border-color-content-removed: #987027;
}