@import "tailwindcss";

:root {
  /* Light Mode - Default */
  --background: #f8fafc;
  --foreground: #0f172a;
  
  /* Card colors */
  --card-bg: #ffffff;
  --card-border: #e2e8f0;
  
  /* Vibrant accent colors */
  --accent-blue: #3b82f6;
  --accent-green: #10b981;
  --accent-red: #f43f5e;
  --accent-yellow: #f59e0b;
  --accent-purple: #8b5cf6;
  --accent-pink: #ec4899;
  --accent-teal: #14b8a6;
  --accent-orange: #f97316;
  
  /* UI colors */
  --text-secondary: #64748b;
  --progress-bg: #e2e8f0;
  
  /* Gradient colors */
  --gradient-blue: linear-gradient(135deg, #3b82f6, #2563eb);
  --gradient-purple: linear-gradient(135deg, #8b5cf6, #7c3aed);
  --gradient-green: linear-gradient(135deg, #10b981, #059669);
  --gradient-red: linear-gradient(135deg, #f43f5e, #e11d48);
}

.dark {
  /* Dark Mode */
  --background: #0f172a;
  --foreground: #ffffff;
  
  /* Card colors */
  --card-bg: #1e293b;
  --card-border: #334155;
  
  /* Vibrant accent colors */
  --accent-blue: #3b82f6;
  --accent-green: #10b981;
  --accent-red: #f43f5e;
  --accent-yellow: #f59e0b;
  --accent-purple: #8b5cf6;
  --accent-pink: #ec4899;
  --accent-teal: #14b8a6;
  --accent-orange: #f97316;
  
  /* UI colors */
  --text-secondary: #94a3b8;
  --progress-bg: #334155;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans), sans-serif;
}

/* Colorful gradient borders */
.gradient-border {
  position: relative;
  border-radius: 0.5rem;
  overflow: hidden;
}

.gradient-border::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0.5rem;
  padding: 2px;
  background: linear-gradient(45deg, var(--accent-blue), var(--accent-purple), var(--accent-pink));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}