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

:root {
  --background: hsl(0, 0%, 100%);
  --foreground: hsl(20, 14.3%, 4.1%);
  --muted: hsl(60, 4.8%, 95.9%);
  --muted-foreground: hsl(25, 5.3%, 44.7%);
  --popover: hsl(0, 0%, 100%);
  --popover-foreground: hsl(20, 14.3%, 4.1%);
  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(20, 14.3%, 4.1%);
  --border: hsl(20, 5.9%, 90%);
  --input: hsl(20, 5.9%, 90%);
  --primary: hsl(338, 100%, 54%);
  --primary-foreground: hsl(211, 100%, 99%);
  --secondary: hsl(60, 4.8%, 95.9%);
  --secondary-foreground: hsl(24, 9.8%, 10%);
  --accent: hsl(60, 4.8%, 95.9%);
  --accent-foreground: hsl(24, 9.8%, 10%);
  --destructive: hsl(0, 84.2%, 60.2%);
  --destructive-foreground: hsl(60, 9.1%, 97.8%);
  --ring: hsl(20, 14.3%, 4.1%);
  --radius: 0.5rem;
  --tikpink: hsl(338, 100%, 50%);
  --tikcyan: hsl(174, 100%, 56%);
  --tikdark: hsl(225, 39%, 13%);
  --tikgray: hsl(210, 20%, 98%);
}

.dark {
  --background: hsl(240, 10%, 3.9%);
  --foreground: hsl(0, 0%, 98%);
  --muted: hsl(240, 3.7%, 15.9%);
  --muted-foreground: hsl(240, 5%, 64.9%);
  --popover: hsl(240, 10%, 3.9%);
  --popover-foreground: hsl(0, 0%, 98%);
  --card: hsl(240, 10%, 3.9%);
  --card-foreground: hsl(0, 0%, 98%);
  --border: hsl(240, 3.7%, 15.9%);
  --input: hsl(240, 3.7%, 15.9%);
  --primary: hsl(338, 100%, 54%);
  --primary-foreground: hsl(211, 100%, 99%);
  --secondary: hsl(240, 3.7%, 15.9%);
  --secondary-foreground: hsl(0, 0%, 98%);
  --accent: hsl(240, 3.7%, 15.9%);
  --accent-foreground: hsl(0, 0%, 98%);
  --destructive: hsl(0, 62.8%, 30.6%);
  --destructive-foreground: hsl(0, 0%, 98%);
  --ring: hsl(240, 4.9%, 83.9%);
  --radius: 0.5rem;
  --tikpink: hsl(338, 100%, 50%);
  --tikcyan: hsl(174, 100%, 56%);
  --tikdark: hsl(0, 0%, 98%);
  --tikgray: hsl(240, 10%, 3.9%);
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply font-inter antialiased bg-background text-foreground;
    font-family: 'Inter', sans-serif;
  }
}

@layer utilities {
  .font-inter {
    font-family: 'Inter', sans-serif;
  }
  
  .text-tikpink {
    color: var(--tikpink);
  }
  
  .text-tikcyan {
    color: var(--tikcyan);
  }
  
  .text-tikdark {
    color: var(--tikdark);
  }
  
  .bg-tikpink {
    background-color: var(--tikpink);
  }
  
  .bg-tikcyan {
    background-color: var(--tikcyan);
  }
  
  .bg-tikdark {
    background-color: var(--tikdark);
  }
  
  .bg-tikgray {
    background-color: var(--tikgray);
  }
  
  .gradient-tikpink-cyan {
    background: linear-gradient(to right, var(--tikpink), var(--tikcyan));
  }
  
  .gradient-text-tikpink-cyan {
    background: linear-gradient(to right, var(--tikpink), var(--tikcyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
}