@import "../helpers/colors";
:root {
  @include generate-color-variants(--c-black, #111111);
  --c-white: #ffffff;
  // Internal color variables
  /* Should NOT be used directly for theming or component styles */
  @include generate-color-variants(--_c-green-primary, #00f0c2);
  @include generate-color-variants(--_c-green-secondary, #CFFAED);
  @include generate-color-variants(--_c-dark-primary, #111111);
  @include generate-color-variants(--_c-dark-secondary, #403f3f);
  @include generate-color-variants(--_c-gray-primary, #cccccc);
  @include generate-color-variants(--_c-gray-secondary, #ededed);
  @include generate-color-variants(--_c-gray-accent, #222222);
  @include generate-color-variants(--_c-light-primary, #f6f6f6);
  @include generate-color-variants(--_c-light-secondary, #ffffff);
  @include generate-color-variants(--_c-red-primary, #ff3363);
  @include generate-color-variants(--_c-red-secondary, #fad3dc);
  @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-dark-primary);

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