/** *********************************************************** **/
/** Static tokens                                               **/
/** -------------                                               **/
/** This file contains mappings and values not generated        **/
/** from the tailwind theme. They shouldn't change often.       **/
/** The main color values are in tailwind.js, which is used     **/
/** by make-tokens.js to generate generated.css.                **/
/** *********************************************************** **/

:host,
:root,
.sl-theme-light {
  color-scheme: light;

  --ts-color-white: #fff;
  --ts-color-white-rgb: 255, 255, 255;
  --ts-color-black: #000;
  --ts-color-black-rgb: 0, 0, 0;

  /**** Semantic colors ****/
  --ts-color-primary: var(--ts-color-blue-700);
  --ts-color-primary-rgb: var(--ts-color-blue-700-rgb);
  --ts-color-default: var(--ts-color-gray-900);
  --ts-color-subdued: var(--ts-color-gray-700);
  --ts-color-success: var(--ts-color-green-700);
  --ts-color-error: var(--ts-color-red-700);
  --ts-color-link: var(--ts-color-primary-600);
  --ts-color-link-light: var(--ts-color-primary-300);
  --ts-color-text: var(--ts-color-default);
  --ts-color-text-default: var(--ts-color-gray-900);
  --ts-color-text-subdued: var(--ts-color-gray-700);
  --ts-color-text-light: var(--ts-color-white);
  --ts-color-text-light-subdued: var(--ts-color-gray-200);
  --ts-color-text-success: var(--ts-color-success-700);
  --ts-color-text-success-light: var(--ts-color-success-300);
  --ts-color-background-success: var(--ts-color-success-100);
  --ts-color-border-success: var(--ts-color-success-200);
  --ts-color-text-warning: var(--ts-color-warning-800);
  --ts-color-background-warning: var(--ts-color-warning-50);
  --ts-color-border-warning: var(--ts-color-warning-200);
  --ts-color-text-danger: var(--ts-color-danger-700);
  --ts-color-text-danger-light: var(--ts-color-danger-400);
  --ts-color-background-danger: var(--ts-color-danger-50);
  --ts-color-border-danger: var(--ts-color-danger-200);
  --ts-color-text-info: var(--ts-color-primary-600);
  --ts-color-background-info: var(--ts-color-primary-50);
  --ts-color-border-info: var(--ts-color-primary-200);

  /** ***************** **/
  /** Typography        **/
  /** ***************** **/

  /* 72px */
  --ts-font-7xl: var(--sl-font-size-4x-large);
  /* 60px */
  --ts-font-6xl: 3.75rem;
  /* 48px */
  --ts-font-5xl: var(--sl-font-size-3x-large);
  /* 36px */
  --ts-font-4xl: var(--sl-font-size-2x-large);
  /* 24px */
  --ts-font-2xl: var(--sl-font-size-x-large);
  /* 20px */
  --ts-font-xl: var(--sl-font-size-large);
  /* 16px */
  --ts-font-base: var(--sl-font-size-medium);
  /* 14px */
  --ts-font-sm: var(--sl-font-size-small);
  /* 12px */
  --ts-font-xs: var(--sl-font-size-x-small);

  /***** font-weight */
  /* 700 */
  --ts-font-bold: var(--sl-font-weight-bold);
  /* 600 */
  --ts-font-semibold: 600;
  /* 500 */
  --ts-font-medium: var(--sl-font-weight-semibold);
  /* 400 */
  --ts-font-normal: var(--sl-font-weight-normal);
  /* 300 */
  --ts-font-light: var(--sl-font-weight-light);

  /***** line-height */
  /* 1 */
  --ts-leading-none: var(--sl-line-height-denser);
  --ts-leading-tight: 1.25;
  /* 16px */
  --ts-leading-4: 1rem;
  /* 20px */
  --ts-leading-5: 1.25rem;
  /* 24px */
  --ts-leading-6: 1.5rem;
  /* 28px */
  --ts-leading-7: 1.75rem;

  /***** letter-spacing */
  --sl-letter-spacing-dense: -0.025em;
  /* -0.025em; */
  --ts-tracking-tight: var(--sl-letter-spacing-dense);
  /* normal */
  --ts-tracking-normal: var(--sl-letter-spacing-normal);

  /** ***************** **/
  /** Miscellaneous     **/
  /** ***************** **/

  /***** Border radius */
  /* 4px for checkbox, tooltip */
  --ts-border-radius-x-small: 0.25rem;
  /* 6px, for input size small */
  --ts-border-radius-small: 0.375rem;

  /***** Shadows */
  /* For cards */
  --ts-shadow-x-small: 0 0 4px 0 rgb(0 0 0 / 0.04);
  /* For inputs */
  --ts-shadow-small: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  /* For toasts */
  --ts-shadow-medium: 0 8px 10px -6px rgb(0 0 0 / 0.1);
  /* For menus */
  --ts-shadow-large:
    0 4px 6px -4px rgb(0 0 0 / 0.1), 0 10px 15px -3px rgb(0 0 0 / 0.1);
  /* For modals */
  --ts-shadow-x-large: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  /***** Spacing */
  /* 24px */
  --ts-spacing-large: 1.5rem;
  /* 32px */
  --ts-spacing-2x-large: 2rem;
  /* 64px */
  --ts-spacing-4x-large: 4rem;
  /* 80px */
  --ts-spacing-5x-large: 5rem;

  /***** Input sizes */
  /* 28px */
  --ts-input-height-small: 1.75rem;
  /* 40px */
  --ts-input-height-medium: 2.5rem;
  /* 48px */
  --ts-input-height-large: 3rem;
  /* 64px */
  --ts-input-height-x-large: 4rem;
}