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

:root,
.cx-theme-light {
  color-scheme: light;

  /*
   * Theme Tokens
   */

  /* Primary */
  --cx-color-primary-50 : #E5F1FF;
  --cx-color-primary-100: #DBEAFE;
  --cx-color-primary-200: #BFDBFE;
  --cx-color-primary-300: #93C5FD;
  --cx-color-primary-400: #60A5FA;
  --cx-color-primary-500: #3B82F6;                      /* Primary */
  --cx-color-primary-600: #2563EB;
  --cx-color-primary-700: #1D4ED8;
  --cx-color-primary-800: #1E40AF;
  --cx-color-primary-900: #1E3A8A;
  --cx-color-primary-950: #152149;
  --cx-color-primary    : var(--cx-color-primary-600);

  /* Success */
  --cx-color-success-50 : #F0FDF4;
  --cx-color-success-100: #DCFCE7;
  --cx-color-success-200: #BBF7D0;
  --cx-color-success-300: #86EFAC;
  --cx-color-success-400: #4ADE80;
  --cx-color-success-500: #22C55E;                      /* Primary */
  --cx-color-success-600: #16A34A;
  --cx-color-success-700: #15803D;
  --cx-color-success-800: #166534;
  --cx-color-success-900: #14532D;
  --cx-color-success-950: #0C311B;
  --cx-color-success    : var(--cx-color-success-600);

  /* Warning */
  --cx-color-warning-50 : #FFFBEB;
  --cx-color-warning-100: #FEF3C7;
  --cx-color-warning-200: #FDE68A;
  --cx-color-warning-300: #FCD34D;
  --cx-color-warning-400: #FBBF24;
  --cx-color-warning-500: #F59E0B;                      /* Primary */
  --cx-color-warning-600: #D97706;
  --cx-color-warning-700: #B45309;
  --cx-color-warning-800: #92400E;
  --cx-color-warning-900: #78350F;
  --cx-color-warning-950: #4A230B;
  --cx-color-warning    : var(--cx-color-warning-600);

  /* Danger */
  --cx-color-danger-50 : #FEF2F2;
  --cx-color-danger-100: #FEE2E2;
  --cx-color-danger-200: #FECACA;
  --cx-color-danger-300: #FCA5A5;
  --cx-color-danger-400: #F87171;
  --cx-color-danger-500: #EF4444;                     /* Primary */
  --cx-color-danger-600: #DC2626;
  --cx-color-danger-700: #B91C1C;
  --cx-color-danger-800: #991B1B;
  --cx-color-danger-900: #7F1D1D;
  --cx-color-danger-950: #501414;
  --cx-color-danger    : var(--cx-color-danger-600);

  /* Neutral */
  --cx-color-neutral-0   : #FFF;
  --cx-color-neutral-50  : #F9F9F9;
  --cx-color-neutral-100 : #F4F4F5;
  --cx-color-neutral-200 : #E4E4E7;
  --cx-color-neutral-300 : #D4D4D8;
  --cx-color-neutral-400 : #A1A1AA;
  --cx-color-neutral-500 : #71717A;
  --cx-color-neutral-600 : #52525B;
  --cx-color-neutral-700 : #3F3F46;                      /* Primary */
  --cx-color-neutral-800 : #27272A;
  --cx-color-neutral-900 : #18181B;
  --cx-color-neutral-950 : #131316;
  --cx-color-neutral-1000: #000;
  --cx-color-neutral     : var(--cx-color-neutral-600);

  /*
   * Elevations
   */

  --cx-shadow-x-small: 0 1px 2px hsl(240deg 3.8% 46.1% / 6%);
  --cx-shadow-small  : 0 1px 2px hsl(240deg 3.8% 46.1% / 12%);
  --cx-shadow-medium : 0px 0px 7px 0px rgb(203 222 255 / 70%);
  --cx-shadow-large  : 0px 0px 2px 0px rgb(0 0 0 / 6%), 0px 0px 3px 0px rgb(0 0 0 / 8%), 0px 5px 9px 0px rgb(0 0 0 / 6%), 0px 3px 5px 0px rgb(0 0 0 / 6%);
  --cx-shadow-x-large: 0 4px 16px hsl(240deg 3.8% 46.1% / 12%);

  /* Focus rings */
  --cx-focus-ring-color: var(--cx-color-primary);
  --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-300);
  --cx-input-border-color-disabled           : var(--cx-color-neutral-300);
  --cx-input-border-color-focus              : var(--cx-color-primary);
  --cx-input-border-color-hover              : var(--cx-color-primary-300);
  --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-500);
  --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-color-danger-500);

  /*
   * Overlays
   */

  --cx-overlay-background-color: hsl(240deg 3.8% 46.1% / 33%);

  /*
   * 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-primary-50);
}
