@use 'variables' as *;

:root {
  /* color */
  --sky-background-color-page-default: #{$sky-background-color-page-default};
  --sky-background-color-neutral-light: #{$sky-background-color-neutral-light};
  --sky-background-color-primary-dark: #{$sky-background-color-primary-dark};
  --sky-background-color-disabled: #{$sky-background-color-disabled};
  --sky-background-color-selected: #{$sky-background-color-selected};
  --sky-background-color-info: #{$sky-background-color-info};
  --sky-background-color-info-light: #{$sky-background-color-info-light};
  --sky-background-color-success: #{$sky-background-color-success};
  --sky-background-color-warning: #{$sky-background-color-warning};
  --sky-background-color-danger: #{$sky-background-color-danger};
  --sky-background-color-danger-dark: #{$sky-background-color-danger-dark};

  --sky-border-color-neutral-medium: #{$sky-border-color-neutral-medium};

  --sky-category-color-light-blue: #{$sky-category-color-light-blue};
  --sky-category-color-teal: #{$sky-category-color-teal};
  --sky-category-color-purple: #{$sky-category-color-purple};
  --sky-category-color-orange: #{$sky-category-color-orange};
  --sky-category-color-blue: #{$sky-category-color-blue};
  --sky-category-color-yellow: #{$sky-category-color-yellow};
  --sky-category-color-red: #{$sky-category-color-red};

  --sky-highlight-color-info: #{$sky-highlight-color-info};
  --sky-highlight-color-success: #{$sky-highlight-color-success};
  --sky-highlight-color-warning: #{$sky-highlight-color-warning};
  --sky-highlight-color-danger: #{$sky-highlight-color-danger};

  --sky-text-color-default: #{$sky-text-color-default};
  --sky-text-color-deemphasized: #{$sky-text-color-deemphasized};
  --sky-text-color-on-dark: #{$sky-text-color-on-dark};
  --sky-text-color-action-primary: #{$sky-text-color-action-primary};
  --sky-text-color-action-primary-hover: #{darken(
      $sky-text-color-action-primary,
      10%
    )};

  /* margin */
  --sky-margin-inline-xs: #{$sky-space-xs};
  --sky-margin-inline-sm: #{$sky-space-md};
  --sky-margin-inline-lg: #{$sky-space-lg};
  --sky-margin-inline-xl: #{$sky-space-xl};
  --sky-margin-inline-xxl: 40px;

  --sky-margin-stacked-xs: #{$sky-space-xs};
  --sky-margin-stacked-sm: #{$sky-space-sm};
  --sky-margin-stacked-lg: #{$sky-space-md};
  --sky-margin-stacked-xl: #{$sky-space-xl};
  --sky-margin-stacked-xxl: 40px;

  /* padding */
  --sky-padding-even-md: #{$sky-space-lg};
  --sky-padding-even-xl: #{$sky-space-xl};
  --sky-padding-half: #{$sky-padding-half};

  /* viewport */
  --sky-viewport-left: 0;
  --sky-viewport-top: 0;
  --sky-viewport-right: 0;
  --sky-viewport-bottom: 0;

  /* component colors */
  --sky-background-color-input-selected: var(--sky-background-color-info-light);
  --sky-background-color-item-selected: var(--sky-background-color-selected);

  /* headings */
  --sky-theme-modern-font-heading-4-weight: 600;
  --sky-theme-modern-font-heading-5-weight: 600;

  /* switch */
  --sky-switch-size: #{$sky-switch-size};
  --sky-switch-margin: #{$sky-switch-margin};
}
