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


:root {
  --color-primary: #2563eb;
  --color-secondary: #002fff;
  --color-accent: #57d906;
  --color-background: #f9fafb;
  --color-dark: #686868;
  --color-light: #f3f4f6;
  --hover-primary: #c7d9fd;
  --bg-primary-hover: #c0cee4;
  --text-primary-hover: #1e40af;
}


.dark {
  --color-background: #1F2937;
  --color-light: #F9FAFB;
}
.my-custom-btn {
  @apply py-2 px-4 rounded text-white;
  background-color: var(--color-primary);
}
.py {
  @apply py-20 px-4 rounded
}

.my-heading {
  @apply ;
  color: var(--color-dark);
}
.my-title {
  @apply ;
  color: var(--color-primary);
}
.text-primary {
  @apply;
  color: var(--color-primary);
}
.text-light {
  @apply;
  color: var(--color-light);
}

.bg-primary {
  @apply;
  background-color: var(--bg-primary);
}

.bg-primary-hover:hover {
  @apply;
  background-color: var(--bg-primary-hover);
}

.text-primary-hover:hover {
  @apply;
  color: var(--text-primary-hover);
}

.primary-hover-bg {
  @apply ;
  background-color: var(--bg-primary);
}


body {
  background-color: var(--color-background);
  color: var(--color-dark);
}