@tailwind base;
@tailwind components;
@tailwind utilities;

/* LIGHT MODE */
:root {
  --button-outline: rgba(0, 0, 0, .10);
  --badge-outline: rgba(0, 0, 0, .05);
  --opaque-button-border-intensity: -8;
  --elevate-1: rgba(0, 0, 0, .03);
  --elevate-2: rgba(0, 0, 0, .08);
  
  /* Color Definitions */
  --background: 195 70% 96%;
  --foreground: 200 40% 15%;
  --border: 195 50% 85%;
  --card: 0 0% 100%;
  --card-foreground: 200 40% 15%;
  --card-border: 195 40% 88%;
  --sidebar: 195 60% 94%;
  --sidebar-foreground: 200 40% 18%;
  --sidebar-border: 195 50% 86%;
  
  /* Bright Blue from sky */
  --primary: 193 85% 50%;
  --primary-foreground: 0 0% 100%;
  
  /* Lime Green from grass */
  --accent: 85 75% 50%;
  --accent-foreground: 200 30% 10%;
  
  --secondary: 195 50% 88%;
  --secondary-foreground: 200 40% 20%;
  --muted: 195 40% 90%;
  --muted-foreground: 200 30% 45%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;

  /* Font Styles */
  --font-sans: Inter, sans-serif;
  --font-serif: Georgia, serif;
  --font-mono: Menlo, monospace;
  --radius: .5rem;
}

/* DARK MODE */
.dark {
  --button-outline: rgba(255, 255, 255, .10);
  --badge-outline: rgba(255, 255, 255, .05);
  --opaque-button-border-intensity: 9;
  --elevate-1: rgba(255, 255, 255, .04);
  --elevate-2: rgba(255, 255, 255, .09);

  --background: 200 50% 10%;
  --foreground: 0 0% 98%;
  --border: 195 40% 25%;
  --card: 195 35% 14%;
  --card-foreground: 0 0% 98%;
  --card-border: 195 35% 20%;
  
  /* Bright Blue (slightly lighter in dark mode) */
  --primary: 193 85% 55%;
  --primary-foreground: 0 0% 100%;
  
  /* Lime Green (slightly lighter in dark mode) */
  --accent: 85 75% 55%;
  --accent-foreground: 200 30% 10%;
  
  --secondary: 195 30% 22%;
  --secondary-foreground: 0 0% 95%;
  --muted: 195 25% 20%;
  --muted-foreground: 195 20% 70%;
  --destructive: 0 68% 48%;
  --destructive-foreground: 0 0% 100%;
}

/* CHROME/GLOSSY EFFECTS */
@layer base {
  body {
    @apply font-sans antialiased bg-background text-foreground;
  }

  /* Chrome Card - Glossy gradient cards */
  .chrome-card {
    background: linear-gradient(135deg, 
      hsl(var(--card)) 0%, 
      hsl(var(--card)) 50%,
      hsl(from hsl(var(--card)) h s calc(l + 3)) 100%);
    box-shadow: 
      inset 0 1px 1px rgba(255,255,255,0.1),
      0 4px 12px rgba(0,0,0,0.15);
  }

  /* Chrome Button - Blue gradient buttons */
  .chrome-button {
    background: linear-gradient(180deg, 
      hsl(from hsl(var(--primary)) h s calc(l + 8)) 0%,
      hsl(var(--primary)) 50%,
      hsl(from hsl(var(--primary)) h s calc(l - 5)) 100%);
    box-shadow: 
      inset 0 1px 0 rgba(255,255,255,0.3),
      0 2px 8px rgba(0,0,0,0.2);
    @apply px-6 py-3 rounded-lg text-white font-semibold transition-all duration-300 hover:scale-105;
  }

  /* Chrome Accent - Lime green gradient buttons */
  .chrome-accent {
    background: linear-gradient(180deg, 
      hsl(from hsl(var(--accent)) h s calc(l + 10)) 0%,
      hsl(var(--accent)) 50%,
      hsl(from hsl(var(--accent)) h s calc(l - 5)) 100%);
    box-shadow: 
      inset 0 1px 0 rgba(255,255,255,0.4),
      0 2px 8px rgba(0,0,0,0.2);
    @apply px-6 py-3 rounded-lg text-white font-semibold transition-all duration-300 hover:scale-105;
  }

  /* Glass Effect - Frosted glass morphism */
  .glass-effect {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Metallic Shine - Animated highlight sweep on hover */
  .metallic-shine {
    position: relative;
    overflow: hidden;
  }

  .metallic-shine::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, 
      transparent, 
      rgba(255,255,255,0.3), 
      transparent);
    transition: left 0.5s;
  }

  .metallic-shine:hover::before {
    left: 150%;
  }
}

/* Custom utility classes */
@layer utilities {
  .text-gradient {
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .bg-gradient-brand {
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
  }