/* Plus234Feed Design System - CSS Custom Properties */
/* Use this for vanilla CSS/HTML projects or as a fallback */

:root {
  /* Brand Colors */
  --color-brand-green: #417742;
  --color-brand-green-2: #548C4C;
  --color-brand-green-3: #5E9849;
  --color-brand-grey: #414042;
  --color-brand-orange: #f97316;
  --color-brand-purple: #7c3aed;

  /* Light Mode Backgrounds */
  --color-bg-base: #f5f4f1;
  --color-bg-card: #ffffff;
  --color-bg-subtle: #f0efeb;

  /* Dark Mode Backgrounds */
  --color-bg-base-dark: #414042;
  --color-bg-card-dark: #232323;
  --color-bg-subtle-dark: #232323;

  /* Text Colors */
  --color-text-primary: #414042;
  --color-text-primary-dark: #f9fafb;
  --color-text-secondary: #6b7280;
  --color-text-secondary-dark: #d1d5db;

  /* Accent Colors */
  --color-accent-yellow: #fcd34d;
  --color-accent-blue: #3b82f6;
  --color-accent-rose: #f43f5e;
  --color-accent-orange: #f97316;
  --color-accent-purple: #7c3aed;

  /* Font Family */
  --font-family-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  /* Animations */
  --animation-ping-slow: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  --animation-slide-up: slide-up 0.5s ease-out;
}

/* Dark mode overrides */
.dark {
  --color-bg-base: var(--color-bg-base-dark);
  --color-bg-card: var(--color-bg-card-dark);
  --color-bg-subtle: var(--color-bg-subtle-dark);
  --color-text-primary: var(--color-text-primary-dark);
  --color-text-secondary: var(--color-text-secondary-dark);
}

/* Keyframes */
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Base styles */
body {
  font-family: var(--font-family-sans);
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
}

/* Utility classes for non-Tailwind projects */
.bg-brand-green { background-color: var(--color-brand-green); }
.bg-brand-green-2 { background-color: var(--color-brand-green-2); }
.bg-brand-green-3 { background-color: var(--color-brand-green-3); }
.bg-brand-grey { background-color: var(--color-brand-grey); }
.bg-brand-orange { background-color: var(--color-brand-orange); }
.bg-brand-purple { background-color: var(--color-brand-purple); }

.text-brand-green { color: var(--color-brand-green); }
.text-brand-green-2 { color: var(--color-brand-green-2); }
.text-brand-green-3 { color: var(--color-brand-green-3); }
.text-brand-grey { color: var(--color-brand-grey); }
.text-brand-orange { color: var(--color-brand-orange); }
.text-brand-purple { color: var(--color-brand-purple); }

.bg-base { background-color: var(--color-bg-base); }
.bg-card { background-color: var(--color-bg-card); }
.bg-subtle { background-color: var(--color-bg-subtle); }

.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }

.animate-ping-slow { animation: var(--animation-ping-slow); }
.animate-slide-up { animation: var(--animation-slide-up); }