@import url('./ol-base.css');

.cx-theme-dark {
  color-scheme: dark;

  /*
   * Theme Tokens
   */

  /* Primary */
  --cx-color-primary-50 : #202E5F;                      /* Primary hover */
  --cx-color-primary-100: #274195;
  --cx-color-primary-200: #2744B4;
  --cx-color-primary-300: #2852DD;
  --cx-color-primary-400: #2F67F0;
  --cx-color-primary-500: #2A77FA;                      /* Primary */
  --cx-color-primary-600: #4D9CFF;
  --cx-color-primary-700: #7EBDFF;
  --cx-color-primary-800: #AAD3FF;
  --cx-color-primary-900: #C6E2FF;
  --cx-color-primary-950: #E7F6FF;
  --cx-color-primary    : var(--cx-color-primary-500);

  /* Success */
  --cx-color-success-50 : #133F25;
  --cx-color-success-100: #1B5D34;
  --cx-color-success-200: #1C6A38;
  --cx-color-success-300: #1D8541;
  --cx-color-success-400: #20A84E;
  --cx-color-success-500: #26B559;                      /* Primary */
  --cx-color-success-600: #3ADF76;
  --cx-color-success-700: #74F2A1;
  --cx-color-success-800: #A8FBC5;
  --cx-color-success-900: #C7FFDC;
  --cx-color-success-950: #E8FFF1;
  --cx-color-success    : var(--cx-color-success-600);

  /* Warning */
  --cx-color-warning-50 : #592C12;
  --cx-color-warning-100: #833C14;
  --cx-color-warning-200: #974413;
  --cx-color-warning-300: #BA5810;
  --cx-color-warning-400: #DF7C0F;
  --cx-color-warning-500: #F29704;                      /* Primary */
  --cx-color-warning-600: #FFBD11;
  --cx-color-warning-700: #FFD239;
  --cx-color-warning-800: #FFE675;
  --cx-color-warning-900: #FFF5B2;
  --cx-color-warning-950: #FFFFE3;
  --cx-color-warning    : var(--cx-color-warning-600);

  /* Danger */
  --cx-color-danger-50 : #5F1B1B;
  --cx-color-danger-100: #8A2423;
  --cx-color-danger-200: #9E211F;
  --cx-color-danger-300: #BF2320;
  --cx-color-danger-400: #E22D2A;
  --cx-color-danger-500: #F43230;                     /* Primary */
  --cx-color-danger-600: #FE5C5C;
  --cx-color-danger-700: #FF7272;
  --cx-color-danger-800: #FFB6B6;
  --cx-color-danger-900: #FFCECE;
  --cx-color-danger-950: #FFEAEA;
  --cx-color-danger    : var(--cx-color-danger-600);

  /* Neutral */
  --cx-color-neutral-0   : #1A1A1E;
  --cx-color-neutral-50  : #242428;
  --cx-color-neutral-100 : #2C2C31;
  --cx-color-neutral-200 : #36363B;
  --cx-color-neutral-300 : #43434A;
  --cx-color-neutral-400 : #56565F;
  --cx-color-neutral-500 : #6C6C74;
  --cx-color-neutral-600 : #8E8E9A;
  --cx-color-neutral-700 : #B6B6BE;
  --cx-color-neutral-800 : #D3D3D9;
  --cx-color-neutral-900 : #E8E8EC;                      /* Primary */
  --cx-color-neutral-950 : #F2F2F2;
  --cx-color-neutral-1000: #fff;
  --cx-color-neutral     : var(--cx-color-neutral-700);

  /*
   * Elevations
   */

  --cx-shadow-x-small: 0 1px 2px rgb(0 0 0 / 18%);
  --cx-shadow-small  : 0 1px 2px rgb(0 0 0 / 24%);
  --cx-shadow-medium : 0 5px 17px hsl(240deg 5% 10% / 80%);
  --cx-shadow-large  : 0 10px 35px hsl(240deg 5% 5% / 90%);
  --cx-shadow-x-large: 0 4px 16px hsl(0deg 0% 0% 24%);

  /* Focus rings */
  --cx-focus-ring-color: var(--cx-color-primary-600);
  --cx-focus-ring      : var(--cx-focus-ring-style) var(--cx-focus-ring-width)
    var(--cx-focus-ring-color);

  /*
   * Forms
   */

  /* Inputs */
  --cx-input-background-color                : var(--cx-color-neutral-0);
  --cx-input-background-color-disabled       : var(--cx-color-neutral-100);
  --cx-input-background-color-focus          : var(--cx-input-background-color);
  --cx-input-background-color-hover          : var(--cx-input-background-color);
  --cx-input-border-color                    : var(--cx-color-neutral-400);
  --cx-input-border-color-disabled           : var(--cx-color-neutral-400);
  --cx-input-border-color-focus              : var(--cx-color-primary-600);                                  /* Cortex: #6ac8ff */
  --cx-input-border-color-hover              : var(--cx-color-primary-700);                                  /* Cortex: #81b0d4 */
  --cx-input-color                           : var(--cx-color-neutral-900);
  --cx-input-color-disabled                  : var(--cx-color-neutral-900);
  --cx-input-color-focus                     : var(--cx-color-neutral-900);
  --cx-input-color-hover                     : var(--cx-color-neutral-900);
  --cx-input-filled-background-color         : var(--cx-color-neutral-100);
  --cx-input-filled-background-color-disabled: var(--cx-color-neutral-100);
  --cx-input-filled-background-color-focus   : var(--cx-color-neutral-100);
  --cx-input-filled-background-color-hover   : var(--cx-color-neutral-100);
  --cx-input-filled-color                    : var(--cx-color-neutral-800);
  --cx-input-filled-color-disabled           : var(--cx-color-neutral-800);
  --cx-input-filled-color-focus              : var(--cx-color-neutral-700);
  --cx-input-filled-color-hover              : var(--cx-color-neutral-800);
  --cx-input-focus-ring-color                : hsl(198.6deg 88.7% 48.4% / 40%);
  --cx-input-help-text-color                 : var(--cx-color-neutral-600);
  --cx-input-icon-color                      : var(--cx-color-neutral-500);
  --cx-input-icon-color-focus                : var(--cx-color-neutral-600);
  --cx-input-icon-color-hover                : var(--cx-color-neutral-600);
  --cx-input-invalid-border-color            : var(--cx-color-danger);
  --cx-input-invalid-color                   : var(--cx-color-danger-700);
  --cx-input-invalid-shadow                  : 0 0 0 var(--cx-focus-ring-width) var(--cx-color-danger-300);
  --cx-input-label-color                     : var(--cx-color-neutral-700);
  --cx-input-placeholder-color               : var(--cx-color-neutral-400);
  --cx-input-placeholder-color-disabled      : var(--cx-color-neutral-600);
  --cx-input-required-content-color          : var(--cx-input-label-color);

  /*
   * Overlays
   */

  --cx-overlay-background-color: hsl(0deg 0% 0% / 43%);

  /*
   * Panels
   */

  --cx-panel-background-color: var(--cx-color-neutral-0);
  --cx-panel-border-color    : var(--cx-color-neutral-200);

  /*
   * Menu
   */
  --cx-menu-item-background-color-hover: var(--cx-color-neutral-100);
}
