:root {
    --color-primary: #7f3fbf;
    --color-primary_bg: #ffffff;
    --color-secondary_bg: rgb(245, 245, 245);
    --color-accent_1: #7f3fbf;
    --color-accent_2: #4a1d6e;
    --color-text: #333333;

    --color-primary_dark: #7f3fbf;
    --color-primary_bg_dark: #171717;
  }

  @layer base {
    body {
      color: var(--color-text);
    }
  }

  @layer components {
    .btn-accent {
      background-color: var(--color-accent_1);
      color: var(--color-primary);
    }

    .btn-accent-secondary {
      background-color: var(--color-accent_2);
      color: var(--color-primary);
    }
  }