79 lines
1.7 KiB
CSS
79 lines
1.7 KiB
CSS
:root {
|
|
/* Primary colors */
|
|
--color-primary-50: #e5f4ea;
|
|
--color-primary-100: #c1e3cd;
|
|
--color-primary-200: #9cd2ae;
|
|
--color-primary-300: #78c18f;
|
|
--color-primary-400: #54b070;
|
|
--color-primary-500: #007934; /* Main primary color */
|
|
--color-primary-600: #006e2f;
|
|
--color-primary-700: #005e28;
|
|
--color-primary-800: #004f22;
|
|
--color-primary-900: #00401b;
|
|
|
|
/* Secondary colors (yellow) */
|
|
--color-secondary-50: #fefae8;
|
|
--color-secondary-100: #fcf3c4;
|
|
--color-secondary-200: #fbec9f;
|
|
--color-secondary-300: #f9e57a;
|
|
--color-secondary-400: #f8df55;
|
|
--color-secondary-500: #F7E8A5; /* Main secondary color */
|
|
--color-secondary-600: #e0d294;
|
|
--color-secondary-700: #c9bc84;
|
|
--color-secondary-800: #b2a773;
|
|
--color-secondary-900: #9c9162;
|
|
|
|
/* Accent colors */
|
|
--color-accent-green: #7BC142;
|
|
--color-accent-blue: #E3F2FD;
|
|
--color-accent-orange: #FFF3E0;
|
|
--color-accent-purple: #F3E5F5;
|
|
--color-accent-red: #FFEBEE;
|
|
}
|
|
|
|
/* Utility classes for backgrounds */
|
|
.bg-primary {
|
|
background-color: var(--color-primary-500);
|
|
}
|
|
|
|
.bg-secondary {
|
|
background-color: var(--color-secondary-500);
|
|
}
|
|
|
|
.bg-accent-green {
|
|
background-color: var(--color-accent-green);
|
|
}
|
|
|
|
.bg-accent-blue {
|
|
background-color: var(--color-accent-blue);
|
|
}
|
|
|
|
.bg-accent-orange {
|
|
background-color: var(--color-accent-orange);
|
|
}
|
|
|
|
.bg-accent-purple {
|
|
background-color: var(--color-accent-purple);
|
|
}
|
|
|
|
.bg-accent-red {
|
|
background-color: var(--color-accent-red);
|
|
}
|
|
|
|
/* Utility classes for text colors */
|
|
.text-primary {
|
|
color: var(--color-primary-500);
|
|
}
|
|
|
|
.text-secondary {
|
|
color: var(--color-secondary-500);
|
|
}
|
|
|
|
.text-accent-green {
|
|
color: var(--color-accent-green);
|
|
}
|
|
|
|
.text-normalGreen{
|
|
color: "#075C39",
|
|
}
|