@use './functions/check-contrast.scss' as *;
@use './functions/rgb.scss' as *;

// Using full Material Components CSS
@import '../../assets/material-components-web.min.css';

:root {
  /**
  * ANCHOR Defined by the user
  */
  --astral-primary-font: 'K2D', sans-serif;
  --astral-secondary-font: 'Merriweather', serif;

  @include set-color-variable('#6200ea', --astral-primary-color);
  @include set-color-variable('#ffffff', --astral-primary-contrast-color);
  @include set-color-variable('#03dac6', --astral-secondary-color);
  @include set-color-variable('#212121', --astral-secondary-contrast-color);
  @include set-color-variable('#00c853', --astral-success-color);
  @include set-color-variable('#ffffff', --astral-success-contrast-color);
  @include set-color-variable('#ff4141', --astral-warning-color);
  @include set-color-variable('#ffffff', --astral-warning-contrast-color);

  @include set-color-variable('#212121', --astral-text-color-light);
  @include set-color-variable('#efefef', --astral-background-color-light);
  @include set-color-variable('#ffffff', --astral-text-color-dark);
  @include set-color-variable('#212121', --astral-background-color-dark);

  &[data-theme='dark'] {
    --astral-text-color: rgba(var(--astral-text-color-dark));
    --astral-background-color: rgba(var(--astral-background-color-dark));
  }

  &[data-theme='light'] {
    --astral-text-color: rgba(var(--astral-text-color-light));
    --astral-background-color: rgba(var(--astral-background-color-light));
  }
}