:root {
  --cc-ff-form-legend: 'Source Sans 3', sans-serif;
  --cc-ff-monospace: 'SourceCodePro', 'monaco', monospace;

  /* All custom properties are sorted alphabetically within each region. */

  /*region Color choices*/
  /* color choices - these should not be referenced inside components (use decisions below instead)
    tool used for grey shades: https://mdigi.tools/color-shades/#333333 (10 or 11 steps)
  */
  --color-blue-100: #012a51;
  --color-blue-80: #002c9d;
  --color-blue-70: #0061bd;
  --color-blue-60: #3569aa;
  --color-blue-30: #cedcff;
  --color-blue-20: #ccd4dc;
  --color-blue-10: #e6eff8;
  --color-green-100: #098846;
  --color-green-30: #baf0be;
  --color-green-20: #c3dab7;
  --color-green-10: #e3ffd6;
  --color-grey-100: #0d0d0d;
  --color-grey-90: #262626;
  --color-grey-80: #404040;
  --color-grey-70: #595959;
  --color-grey-60: #737373;
  --color-grey-50: #8c8c8c;
  --color-grey-40: #a6a6a6;
  --color-grey-30: #bfbfbf;
  --color-grey-20: #d9d9d9;
  --color-grey-15: #e7e7e7;
  --color-grey-10: #f5f5f5;
  /* do not use except inside cc-header-app & cc-tile-instances*/
  --color-legacy-blue: #1ea2f1;
  --color-legacy-blue-icon: #2b96fd;
  /* do not use except inside cc-header-app & cc-tile-instances*/
  --color-legacy-green: #2faa60;
  /* do not use except inside cc-tile-scalability*/
  --color-legacy-grey: #8c8c8c;
  /* do not use except inside cc-header-app & cc-tile-instances*/
  --color-legacy-red: #ff0032;
  --color-orange-100: #c15807;
  --color-orange-30: #fcf3b5;
  --color-orange-20: #d9d4ad;
  --color-orange-10: #fff9cb;
  --color-purple-light: #e0e0ff;
  --color-red-100: #be242d;
  --color-red-70: #f72d36;
  --color-red-30: #fbc8c2;
  --color-red-20: #facbc9;
  --color-red-10: #ffe4e1;
  --color-white: #ffffff;
  --color-yellow: #e9e138;
  /*endregion*/

  /*region Color Decisions (text)*/
  /* Usage: Sensitive information that require attention.
  For instance: error messages */
  --cc-color-text-danger: var(--color-red-100);

  /* Usage: text part of a disabled element. */
  --cc-color-text-disabled: var(--color-grey-70);

  /* Usage: regular text. */
  --cc-color-text-default: var(--color-grey-90);

  /* Usage: Opposite of default text color - use this with plain backgrounds like primary / success / danger, etc.
  For instance: text inside primary cc-button. */
  --cc-color-text-inverted: var(--color-white);

  /* Usage: info, main color used through the application.
  For instance: text color inside outlined primary cc-button. */
  --cc-color-text-primary: var(--color-blue-60);

  /* Usage: information that need to stand out a little bit more than the rest of the text.
  For instance: links. */
  --cc-color-text-primary-highlight: var(--color-blue-70);

  /* Usage: More contrasted text than primary.
  For instance: percentage chart value. */
  --cc-color-text-primary-strong: var(--color-blue-80);

  /* Usage: Very contrasted text but not black and not default text color.
  For instance: headings. */
  --cc-color-text-primary-strongest: var(--color-blue-100);

  /* Usage: bold text that needs to stand out from normal / light variants.
  For instance: text inside <strong> tags. */
  --cc-color-text-strongest: var(--color-grey-100);

  /* Usage: success or valid feedback.
  For instance: text saying an app is running correctly */
  --cc-color-text-success: var(--color-green-100);

  /* Usage: cautionnary text.
  For instance: text saying an app is stopped. */
  --cc-color-text-warning: var(--color-orange-100);

  /* Usage: text less important than normal text.
  For instance: sidenotes, the required mention inside forms. */
  --cc-color-text-weak: var(--color-grey-80);
  /*endregion*/

  /*region Color Decisions (background)*/
  /* Usage: Usually interactive, used for sensitive actions.
  -- Use this with --cc-color-text-inverted --
  For instance: delete / remove buttons. */
  --cc-color-bg-danger: var(--color-red-100);

  /* Usage: element with a danger background hovered.
 For instance: closed button in notice. */
  --cc-color-bg-danger-hovered: var(--color-red-30);

  /* Usage: minimal way to make content stand out.
  Weakest of all color options for danger content.
  For instance: notice, badge. */
  --cc-color-bg-danger-weak: var(--color-red-30);

  /* Usage: used for sensitive actions.
   * Weakest of all color options for danger content
   For instance: danger notice */
  --cc-color-bg-danger-weaker: var(--color-red-10);

  /* Usage: default background color
  -- Not used at the moment - will be when we allow theme override. -- */
  --cc-color-bg-default: var(--color-white);

  /* Usage: neutral background that stands out a little bit from the default one.
  For instance: blocks, cards, table rows. */
  --cc-color-bg-neutral: var(--color-grey-10);

  /* Usage: another shade neutral background that stands out a little bit from the default background and neutral one.
  For instance: blocks, cards, table rows, badge. */
  --cc-color-bg-neutral-alt: var(--color-grey-15);

  /* Usage: element with a neutral background with active status.
  For instance: When being clicked, + / - button backgrounds inside cc-input-text */
  --cc-color-bg-neutral-active: var(--color-grey-20);

  /* Usage: element with neutral background is disabled.
  For instance: disabled text / number input */
  --cc-color-bg-neutral-disabled: var(--color-grey-15);

  /* Usage: element with a neutral background hovered.
  For instance: Card or table row being hovered. */
  --cc-color-bg-neutral-hovered: var(--color-grey-15);

  /* Usage: element with a neutral background in readonly.
  For instance: readonly input. */
  --cc-color-bg-neutral-readonly: var(--color-grey-10);

  /* Usage: Usually interactive, used to trigger basic actions that are not submit, delete, reset, etc.
  -- Use this with --cc-color-text-inverted --
  For instance: Modal opening button, add an element without refreshing the page. */
  --cc-color-bg-primary: var(--color-blue-60);

  /* Usage: element with a primary background hovered.
 For instance: closed button in notice. */
  --cc-color-bg-primary-hovered: var(--color-blue-20);

  /* Usage: minimal way to make content stand out.
  * Weakest of all color options for information content.
  For instance: notice, badge. */
  --cc-color-bg-primary-weak: var(--color-blue-30);

  /* Usage: used for primary actions.
  For instance: notice */
  --cc-color-bg-primary-weaker: var(--color-blue-10);

  /* Usage: content that needs to stand out a little more than primary content.
  For instance: some icons. */
  --cc-color-bg-primary-highlight: var(--color-blue-70);

  /* Usage: content that needs a plain but very soft background.
  For instance: tags, pieces of text that need to stand out but not too much */
  --cc-color-bg-soft: var(--color-purple-light);

  /* Usage: header background when something needs to stand out
  -- Use this with --cc-color-text-inverted --
  For instance: table header, ribbon. */
  --cc-color-bg-strong: var(--color-blue-100);

  /* Usage: Usually interactive, used to trigger submit forms / data, validate something.
  -- Use this with --cc-color-text-inverted --
  For instance: submit buttons */
  --cc-color-bg-success: var(--color-green-100);

  /* Usage: element with a success background hovered.
  For instance: closed button in notice. */
  --cc-color-bg-success-hovered: var(--color-green-20);

  /* Usage: minimal way to make content stand out.
  For instance: badge. */
  --cc-color-bg-success-weak: var(--color-green-30);

  /* Usage: minimal way to make content stand out.
  * Weakest of all color options for success content.
  For instance: notice. */
  --cc-color-bg-success-weaker: var(--color-green-10);

  /* Usage: elements containing short texts with a "caution" / "warning" meaning and usually interactive.
  For instance: ? */
  --cc-color-bg-warning: var(--color-orange-100);

  /* Usage: element with a warning background hovered.
 For instance: closed button in notice. */
  --cc-color-bg-warning-hovered: var(--color-orange-20);

  /* Usage: elements containing a small chunk of text with a "caution" / "warning" meaning with text in --cc-color-text-default.
  * Weak of all color options for warning content
  For instance: badge */
  --cc-color-bg-warning-weak: var(--color-orange-30);

  /* Usage: elements containing sentences with a "caution" / "warning" meaning with text in --cc-color-text-default.
  * Weakest of all color options for warning content
  For instance: warning when no payment method is set */
  --cc-color-bg-warning-weaker: var(--color-orange-10);
  /*endregion*/

  /*region Color Decisions(border)*/

  /* Usage: for danger border */
  --cc-color-border-danger: var(--color-red-100);

  /* Usage: for subtle danger border */
  --cc-color-border-danger-weak: var(--color-red-70);

  /* Usage: for danger border even more subtle */
  --cc-color-border-danger-weaker: var(--color-red-20);

  /* Usage: for subtle decorative borders
  * For instance: block & card borders */
  --cc-color-border-neutral: var(--color-grey-30);

  /* Usage: for disabled borders
  * For instance: disabled input / select borders */
  --cc-color-border-neutral-disabled: var(--color-grey-15);

  /* Usage: for focused borders
  * For instance: focused input / select borders */
  --cc-color-border-neutral-focused: var(--color-grey-70);

  /* Usage: for borders on hover
  * For instance: input / select borders on hover */
  --cc-color-border-neutral-hovered: var(--color-grey-70);

  /* Usage: for contrasted borders.
  * For instance: click targets like input fields */
  --cc-color-border-neutral-strong: var(--color-grey-50);

  /* Usage: for very subtle decorative borders
  * For instance: row separators within a table. */
  --cc-color-border-neutral-weak: var(--color-grey-15);

  /* Usage: for subtle decorative borders
  * For instance: block & card borders */
  --cc-color-border-primary: var(--color-blue-60);

  /* Usage: for disabled borders
  * For instance: disabled input / select borders */
  --cc-color-border-primary-disabled: var(--color-blue-30);

  /* Usage: for focused borders
  * For instance: focused input / select borders */
  --cc-color-border-primary-focused: var(--color-blue-80);

  /* Usage: for borders on hover
  * For instance: input / select borders on hover */
  --cc-color-border-primary-hovered: var(--color-blue-80);

  /* Usage: for contrasted borders.
  * For instance: click targets like input fields */
  --cc-color-border-primary-strong: var(--color-blue-70);

  /* Usage: for very subtle primary decorative borders
  * For instance: row separators within a table. */
  --cc-color-border-primary-weak: var(--color-blue-20);

  /* Usage: for success border */
  --cc-color-border-success-weak: var(--color-green-20);

  /* Usage: for warning border */
  --cc-color-border-warning-weak: var(--color-orange-20);

  /*endregion*/

  /*region Margin Decisions*/
  /* Usage:
  *   - in an horizontal form
  *   - use flex and align-items: start; on the form
  *   - use margin-top: var(--margin-top-btn-horizontal-form); on the <cc-button> element so that it aligns
  *   horizontally even when error / help messages are displayed.
  *  See the All Controls Story - Horizontal form section
  *
  *  The 1.6em value comes from the label line-height (1.25em) and bottom padding (0.35em)
  */
  --cc-margin-top-btn-horizontal-form: 1.6em;
  /*endregion*/

  /*region Focus Outline*/
  --cc-focus-outline: var(--color-blue-60) solid 2px;
  --cc-focus-outline-error: var(--color-red-100) solid 2px;
  --cc-focus-outline-offset: 2px;
  /*endregion*/

  /*region border radius */
  /* Beware: since we use `em` units, the computed value of these tokens might vary even within the same component */
  --cc-border-radius-default: 0.25em;
  --cc-border-radius-small: 0.15em;
  /*endregion */

  /*region Miscellaneous*/
  /**
   * An opacity value that passes a11y tests.
   * Usage: when an interactive item is disable, its opacity can be updated to visually enhanced the disabled state.
   * For instance: when updating/deleting an item and waiting for the server callback.
   */
  --cc-opacity-when-disabled: 0.65;
  /*endregion*/

  /*region Form*/
  /* vertical space between different form controls */
  --cc-form-controls-gap: 2em;

  /* horizontal space between the start of the line and the form control, label excluded */
  --cc-form-controls-indent: 34px;

  /* space between a label and its control */
  --cc-form-label-gap: 0.35em;

  /* space between a label and its control when inline */
  --cc-form-label-gap-inline: 0.75em;
  /*endregion*/
}
