.cus-font-primary {
  font-family: "Nunito", sans-serif;
}
.cus-font-secondary {
  font-family: "Lora", serif;
}

/* static/css/globals.css */

:root {
  /* Primary color shades (Yellow) - Base: #ffd803 */
  --color-primary-50: #fffef0;
  --color-primary-100: #fffcdb;
  --color-primary-200: #fff8b8;
  --color-primary-300: #fff087;
  --color-primary-400: #ffe550;
  --color-primary-480: #ffde15;
  --color-primary-500: #ffd803; /* Base primary */
  --color-primary-600: #e6c200;
  --color-primary-700: #cc9900;
  --color-primary-800: #b37700;
  --color-primary-900: #996600;

  /* Secondary color shades (Light Blue-Green) - Base: #e3f6f5 */
  --color-secondary-50: #f8fdfd;
  --color-secondary-100: #f1fbfa;
  --color-secondary-200: #e8f8f7;
  --color-secondary-300: #e3f6f5; /* Base secondary */
  --color-secondary-380: #d8f2f0;
  --color-secondary-400: #d1f0ee;
  --color-secondary-500: #bfeae7;
  --color-secondary-600: #a8ddd9;
  --color-secondary-700: #8fccc7;
  --color-secondary-800: #75bab5;
  --color-secondary-900: #5aa8a3;

  /* Tertiary color shades (Medium Blue-Green) - Base: #bae8e8 */
  --color-tertiary-50: #f0fafa;
  --color-tertiary-100: #e1f5f5;
  --color-tertiary-200: #d2f0f0;
  --color-tertiary-300: #c3ebeb;
  --color-tertiary-400: #bae8e8; /* Base tertiary */
  --color-tertiary-500: #a8dddd;
  --color-tertiary-600: #96d2d2;
  --color-tertiary-700: #7bc4c4;
  --color-tertiary-800: #60b6b6;
  --color-tertiary-900: #45a8a8;

  /* Text colors */
  --color-paragraph: #2d334a; /* Paragraph text */
  --color-headline: #272343; /* Headline text */
  --color-button: #272343; /* Headline text */

  /* Background */
  --color-background: #fffffe;

  /* Border */
  --color-border: #272343;
  --color-border-light: #d1d5db;

  /* Additional text shades for flexibility */
  --color-text-light: #6b7280; /* Lighter text */
  --color-text-muted: #9ca3af; /* Muted text */
  --color-text-disabled: #d1d5db; /* Disabled text */
  --color-primary-hover: #ffd803;
  --color-muted-hover: #f4f6f8;
  --color-text-hover: #2d334a;
}

/* Quick utility classes for main colors */
.text-primary {
  color: var(--color-primary-500);
}
.text-secondary {
  color: var(--color-secondary-300);
}
.text-tertiary {
  color: var(--color-tertiary-400);
}
.text-paragraph {
  color: var(--color-paragraph);
}
.text-paragraph-light {
  color: var(--color-text-light);
}
.text-headline {
  color: var(--color-headline);
}

.border-primary {
  border-color: var(--color-border);
}

.border-primary-light {
  border-color: var(--color-border-light);
}
.border-secondary {
  border-color: var(--color-secondary-300);
}

.text-button {
  color: var(--color-button);
}

.lines-seconday-light {
  color: var(--color-secondary-300);
}

.bg-primary {
  background-color: var(--color-primary-500);
}
.bg-secondary {
  background-color: var(--color-secondary-300);
}
.bg-tertiary {
  background-color: var(--color-tertiary-400);
}
.bg-white {
  background-color: var(--color-background);
}
.bg-dark {
  background-color: var(--color-paragraph);
}
.bg-main {
  background-color: var(--color-primary-50);
}

.button-primary-hover:hover {
  background-color: var(--color-primary-480);
}
.button-secondary-hover:hover {
  background-color: var(--color-secondary-380);
}

.button-muted-hover:hover {
  background-color: var(--color-muted-hover);
}

.text-dark-hover:hover {
  color: var(--color-text-hover);
}

/* Additional utility classes for popular shades */
.text-primary-light {
  color: var(--color-primary-300);
}
.text-primary-dark {
  color: var(--color-primary-700);
}
.bg-primary-light {
  background-color: var(--color-primary-100);
}
.bg-primary-dark {
  background-color: var(--color-primary-800);
}

.bg-secondary-light {
  background-color: var(--color-secondary-100);
}
.bg-secondary-dark {
  background-color: var(--color-secondary-600);
}

.bg-tertiary-light {
  background-color: var(--color-tertiary-200);
}
.bg-tertiary-dark {
  background-color: var(--color-tertiary-700);
}

/* Animation classes */
.transition-smooth {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-bg {
  transition: background-color 0.3s ease-in-out;
}