/**
 * Codex Design Tokens v1.14.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-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-destructive--visited: #c99391; /* Red link 'Visited' color. Used for visited red links. */
  --color-error: #fd7865;
  --color-warning: #fecc44; /* Note, this is only meant for warning icon for contrast reasons. */
  --color-success: #2cb491; /* Note, this needs to use a tone darker than Red and Yellow for contrast reasons with background White. */
  --color-notice: #f8f9fa;
  --color-content-added: #80cdb3;
  --color-content-removed: #fd7865;
  --color-base--subtle: #a2a9b1;
  --box-shadow-color-base: #fff;
  --box-shadow-color-progressive--focus: #6b8edf;
  --box-shadow-color-destructive--focus: #6b8edf;
  --box-shadow-color-inverted: #000;
  --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-subtle: #202122;
  --background-color-disabled: #54595d; /* Components like Buttons, Checkboxes, Radios, ProgressBars…. */
  --background-color-disabled-subtle: #404244; /* Components like TextInputs, Selects…. */
  --background-color-inverted: #f8f9fa;
  --background-color-progressive--focus: #6b8edf;
  --background-color-progressive-subtle: #233566;
  --background-color-destructive--focus: #6b8edf;
  --background-color-destructive-subtle: #612419;
  --background-color-error: #fc493b;
  --background-color-error--hover: #fd7865;
  --background-color-error--active: #fea898;
  --background-color-error-subtle: #612419;
  --background-color-warning-subtle: #453217;
  --background-color-success-subtle: #153d31;
  --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: #a2a9b1;
  --border-color-disabled: #54595d;
  --border-color-inverted: #101418;
  --border-color-progressive--focus: #6b8edf;
  --border-color-destructive--focus: #6b8edf;
  --border-color-error: #fc493b;
  --border-color-error--hover: #fd7865;
  --border-color-warning: #fecc44;
  --border-color-success: #2cb491;
  --border-color-notice: #c8ccd1;
  --border-color-content-added: #233566;
  --border-color-content-removed: #987027;
}
