@import "tailwindcss";

@theme {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --radius: 0.75rem;
}

@layer base {
  :root {
    --background: oklch(0.985 0 0);
    --foreground: oklch(0.145 0 0);
    --card: oklch(0.985 0 0);
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(0.985 0 0);
    --popover-foreground: oklch(0.145 0 0);
    
    /* Vibrant tech blue/purple for fun tech style */
    --primary: oklch(0.55 0.25 260); 
    --primary-foreground: oklch(0.985 0 0);
    
    --secondary: oklch(0.95 0.05 250);
    --secondary-foreground: oklch(0.2 0.1 260);
    
    --muted: oklch(0.96 0 0);
    --muted-foreground: oklch(0.5 0 0);
    
    /* Fun energetic orange accent */
    --accent: oklch(0.7 0.2 40);
    --accent-foreground: oklch(0.985 0 0);
    
    --destructive: oklch(0.6 0.2 20);
    --destructive-foreground: oklch(0.985 0 0);
    
    --border: oklch(0.9 0 0);
    --input: oklch(0.9 0 0);
    --ring: oklch(0.55 0.25 260);
  }

  .dark {
    --background: oklch(0.15 0.02 260);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.18 0.03 260);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.15 0.02 260);
    --popover-foreground: oklch(0.985 0 0);
    
    --primary: oklch(0.65 0.25 260); /* Brighter in dark mode */
    --primary-foreground: oklch(0.1 0.1 260);
    
    --secondary: oklch(0.25 0.05 260);
    --secondary-foreground: oklch(0.985 0 0);
    
    --muted: oklch(0.25 0.05 260);
    --muted-foreground: oklch(0.7 0 0);
    
    --accent: oklch(0.75 0.2 40);
    --accent-foreground: oklch(0.1 0.1 40);
    
    --destructive: oklch(0.5 0.2 20);
    --destructive-foreground: oklch(0.985 0 0);
    
    --border: oklch(0.25 0.05 260);
    --input: oklch(0.25 0.05 260);
    --ring: oklch(0.65 0.25 260);
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
    border-color: var(--border);
    transition: background-color 0.3s ease, color 0.3s ease;
  }
}

/* Base Fun Tech Styles */
.bg-gradient-tech {
  background-image: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
}

.text-gradient-tech {
  background-image: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Animated Grid Background */
.tech-grid {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, oklch(0.5 0 0 / 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(0.5 0 0 / 0.05) 1px, transparent 1px);
  mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
}