@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --red: "#EF4444";
    --orange: "#E8590C";
    --green: "#099268";

    --accent-color: "#7567C9";
    --background-color: "#161823";
    --card-color: "#11131D";

    --sidebar-color: "#151723";
    --sidebar-hover-color: "#1C202E";

    --line-color: "#1B1E29";
    --line-two-color: "#232735";
  }
}

const config = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}"
  ],
  prefix: "",
  theme: {
    colors: {
      "red": "var(--red)",
      "orange": "var(--orange)",
      "green": "var(--green)"
    },
    extend: {
      colors: {
        "accent": "var(--accent-color)",
        "background": "var(--background-color)",
        "card": "var(--card-color)",

        "sidebar": "#var(--sidebar-color)",
        "sidebar-hover": "var(--sidebar-hover-color)",

        "line": "var(--line-color)",
        "line-two": "var(--line-two-color)"
      }
    }
  }
}