@import "../helpers/colors";
:root {
  @include generate-color-variants(--c-black, #1d1f22);
  --c-white: #ffffff;
  // Internal color variables
  /* Should NOT be used directly for theming or component styles */
  @include generate-color-variants(--_c-green-primary, #5ece7b);
  @include generate-color-variants(--_c-green-secondary, #9ee2b0);
  @include generate-color-variants(--_c-dark-primary, #1d1f22);
  @include generate-color-variants(--_c-dark-secondary, #43464E);
  @include generate-color-variants(--_c-gray-primary, #72757E);
  @include generate-color-variants(--_c-gray-secondary, #8D8F9A);
  @include generate-color-variants(--_c-gray-accent, #e0e0e1);
  @include generate-color-variants(--_c-light-primary, #f1f2f3);
  @include generate-color-variants(--_c-light-secondary, #ffffff);
  @include generate-color-variants(--_c-red-primary, #d12727);
  @include generate-color-variants(--_c-red-secondary, #fcede8);
  @include generate-color-variants(--_c-yellow-primary, #ecc713);
  @include generate-color-variants(--_c-yellow-secondary, #f6e389);
  @include generate-color-variants(--_c-blue-primary, #0468DB);
  @include generate-color-variants(--_c-blue-secondary, #e1f4fe);

  /* Theme color variables */
  // Body and text defaults
  --c-body: var(--_c-light-secondary);
  --c-text: var(--_c-dark-primary);
  --c-text-muted: var(--_c-gray-primary);
  --c-text-disabled: var(--_c-gray-accent);
  --c-link: var(--_c-dark-secondary);
  --c-link-hover: var(--c-black);

  /* Brand colors */
  // Primary
  /* Should be used to drive attention to the main tasks that should be done while using the app.
   * It is meant to be used in major interactive elements of the page. */
  @include assign-color-variants(--c-primary, --_c-green-primary);
  --c-primary-variant: var(--_c-green-secondary);
  --c-on-primary: var(--_c-light-secondary);
  // Secondary
  /* Should be used to drive attention in the elements with relevant info,
   * but where the user is not intended to take action. */
  @include assign-color-variants(--c-secondary, --_c-dark-primary);
  --c-secondary-variant: var(--_c-dark-secondary);
  --c-on-secondary: var(--_c-light-secondary);

  /* Base colors*/
  // Light
  @include assign-color-variants(--c-light, --_c-light-primary);
  --c-light-variant: var(--_c-light-secondary);
  --c-on-light: var(--c-black);
  // Gray
  @include assign-color-variants(--c-gray, --_c-gray-primary);
  --c-gray-variant: var(--_c-gray-secondary);
  --c-on-gray: var(--c-black);
  // Dark
  @include assign-color-variants(--c-dark, --_c-dark-primary);
  --c-dark-variant: var(--_c-dark-secondary);
  --c-on-dark: var(--_c-light-secondary);

  /* Context colors */
  // Info
  @include assign-color-variants(--c-info, --_c-blue-primary);
  --c-info-variant: var(--_c-blue-secondary);
  --c-on-info: var(--_c-light-secondary);
  // Success
  @include assign-color-variants(--c-success, --_c-green-primary);
  --c-success-variant: var(--_c-green-secondary);
  --c-on-success: var(--_c-light-secondary);
  // Waring
  @include assign-color-variants(--c-warning, --_c-yellow-primary);
  --c-warning-variant: var(--_c-yellow-secondary);
  --c-on-warning: var(--_c-light-secondary);
  // Danger
  @include assign-color-variants(--c-danger, --_c-red-primary);
  --c-danger-variant: var(--_c-red-secondary);
  --c-on-danger: var(--_c-light-secondary);
}