@import '../styles/color/colors';

:root,
:host,
.s-theme-default {
  --s-color-blue-0: @blue-0;
  --s-color-blue-1: @blue-1;
  --s-color-blue-2: @blue-2;
  --s-color-blue-3: @blue-3;
  --s-color-blue-4: @blue-4;
  --s-color-blue-5: @blue-5;
  --s-color-blue-6: @blue-6;
  --s-color-blue-7: @blue-7;
  --s-color-blue-8: @blue-8;
  --s-color-blue-9: @blue-9;

  --s-color-red-0: @red-0;
  --s-color-red-1: @red-1;
  --s-color-red-2: @red-2;
  --s-color-red-3: @red-3;
  --s-color-red-4: @red-4;
  --s-color-red-5: @red-5;
  --s-color-red-6: @red-6;
  --s-color-red-7: @red-7;
  --s-color-red-8: @red-8;
  --s-color-red-9: @red-9;

  --s-color-green-0: @green-0;
  --s-color-green-1: @green-1;
  --s-color-green-2: @green-2;
  --s-color-green-3: @green-3;
  --s-color-green-4: @green-4;
  --s-color-green-5: @green-5;
  --s-color-green-6: @green-6;
  --s-color-green-7: @green-7;
  --s-color-green-8: @green-8;
  --s-color-green-9: @green-9;

  --s-color-gold-0: @gold-0;
  --s-color-gold-1: @gold-1;
  --s-color-gold-2: @gold-2;
  --s-color-gold-3: @gold-3;
  --s-color-gold-4: @gold-4;
  --s-color-gold-5: @gold-5;
  --s-color-gold-6: @gold-6;
  --s-color-gold-7: @gold-7;
  --s-color-gold-8: @gold-8;
  --s-color-gold-9: @gold-9;

  --s-color-grey-0: @grey-0;
  --s-color-grey-1: @grey-1;
  --s-color-grey-2: @grey-2;
  --s-color-grey-3: @grey-3;
  --s-color-grey-4: @grey-4;
  --s-color-grey-5: @grey-5;
  --s-color-grey-6: @grey-6;
  --s-color-grey-7: @grey-7;
  --s-color-grey-8: @grey-8;
  --s-color-grey-9: @grey-9;

  --s-color-grey-bg-0: @grey-opacity-0;
  --s-color-grey-bg-1: @grey-opacity-1;
  --s-color-grey-bg-2: @grey-opacity-2;
  --s-color-grey-bg-3: @grey-opacity-3;
  --s-color-grey-bg-4: @grey-opacity-4;
  --s-color-grey-bg-5: @grey-opacity-5;
  --s-color-grey-bg-6: @grey-opacity-6;
  --s-color-grey-bg-7: @grey-opacity-7;
  --s-color-grey-bg-8: @grey-opacity-8;
  --s-color-grey-bg-9: @grey-opacity-9;

  /*
   * Color Primitives
   */

  --s-color-white: #fff;
  --s-color-black: #000;

  --s-color-primary: var(--s-color-blue-5);
  --s-color-primary-hover: var(--s-color-blue-4);
  --s-color-primary-active: var(--s-color-blue-6);
  --s-color-primary-disabled: var(--s-color-blue-2);
  --s-color-primary-bg: var(--s-color-blue-1);
  --s-color-primary-bg-light: var(--s-color-blue-0);

  --s-color-success: var(--s-color-green-5);
  --s-color-success-hover: var(--s-color-green-4);
  --s-color-success-active: var(--s-color-green-6);
  --s-color-success-disabled: var(--s-color-green-2);
  --s-color-success-bg: var(--s-color-green-1);
  --s-color-success-bg-light: var(--s-color-green-0);

  --s-color-error: var(--s-color-red-5);
  --s-color-error-hover: var(--s-color-red-4);
  --s-color-error-active: var(--s-color-red-6);
  --s-color-error-disabled: var(--s-color-red-2);
  --s-color-error-bg: var(--s-color-red-1);
  --s-color-error-bg-light: var(--s-color-red-0);

  --s-color-warning: var(--s-color-gold-5);
  --s-color-warning-hover: var(--s-color-gold-4);
  --s-color-warning-active: var(--s-color-gold-6);
  --s-color-warning-disabled: var(--s-color-gold-2);
  --s-color-warning-bg: var(--s-color-gold-1);
  --s-color-warning-bg-light: var(--s-color-gold-0);

  --s-color-fill: rgba(46, 50, 56, 0.05);
  --s-color-fill-quaternary: rgba(46, 50, 56, 0.09);
  --s-color-fill-secondary: rgba(46, 50, 56, 0.13);

  --s-color-neutral-0: hsl(0, 0%, 100%);
  --s-color-neutral-700: hsl(240 5.3% 26.1%);

  --s-focus-ring-color: hsl(200.4 98% 39.4%);
  --s-focus-ring-style: solid;
  --s-focus-ring-width: 3px;
  --s-focus-ring: var(--s-focus-ring-style) var(--s-focus-ring-width) var(--s-focus-ring-color);
  --s-focus-ring-offset: 1px;

  /*
   * Theme Tokens
   */

  /* Font sizes */
  --s-font-size-small: 12px;
  --s-font-size: 14px;

  --s-font-size-heading-1: 38px;
  --s-font-size-heading-2: 30px;
  --s-font-size-heading-3: 24px;
  --s-font-size-heading-4: 20px;
  --s-font-size-heading-5: 16px;

  --s-line-height-small: 20px;
  --s-line-height: 22px;

  --s-line-height-heading-1: 46px;
  --s-line-height-heading-2: 38px;
  --s-line-height-heading-3: 32px;
  --s-line-height-heading-4: 28px;
  --s-line-height-heading-5: 24px;

  --s-border-radius-none: 0px;
  --s-border-radius-small: 2px;
  --s-border-radius: 4px;
  --s-border-radius-large: 8px;

  --s-border-radius-circle: 50%;
  --s-border-radius-pill: 9999px;

  --s-border-width: 1px;
}