/* Custom CSS Variables */
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --radius: 0.625rem;
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
}

/* Tailwind color overrides using custom properties */
.bg-background {
  background-color: var(--background);
}

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

.text-muted-foreground {
  color: var(--muted-foreground);
}

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

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

.border-destructive\/50 {
  border-color: color-mix(in oklch, var(--destructive) 50%, transparent);
}

.bg-destructive\/10 {
  background-color: color-mix(in oklch, var(--destructive) 10%, transparent);
}

.bg-foreground\/90 {
  background-color: color-mix(in oklch, var(--foreground) 90%, transparent);
}

.border-muted-foreground\/50 {
  border-color: color-mix(in oklch, var(--muted-foreground) 50%, transparent);
}

.bg-muted\/20 {
  background-color: color-mix(in oklch, var(--muted) 20%, transparent);
}

.bg-background\/80 {
  background-color: color-mix(in oklch, var(--background) 80%, transparent);
}

.border-border\/50 {
  border-color: color-mix(in oklch, var(--border) 50%, transparent);
}

.bg-muted\/30 {
  background-color: color-mix(in oklch, var(--muted) 30%, transparent);
}

/* Updated grid pattern to be more visible and consistent across light/dark modes */
/* Making grid pattern much more visible - increased opacity to 15% for light mode */
body {
  position: relative;
  background-color: var(--background);
  background-size: 40px 40px;
}

/* Increased dark mode grid opacity to 12% for better visibility */
.dark body {
  background-size: 40px 40px;
}

/* Glass effect for cards */
.glass-card {
  background: color-mix(in oklch, var(--background) 70%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid color-mix(in oklch, var(--border) 30%, transparent);
}

/* Fade in animation */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}