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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Custom color classes */
.text-razzmatazz {
  color: #d80650;
}

.bg-razzmatazz {
  background-color: #d80650;
}

.hover\:bg-razzmatazz\/90:hover {
  background-color: rgba(216, 6, 80, 0.9);
}

.text-deepCove {
  color: #08143b;
}

.bg-deepCove {
  background-color: #08143b;
}

.bg-deepCove\/50 {
  background-color: rgba(8, 20, 59, 0.5);
}

.text-blackPearl {
  color: #050523;
}

.bg-blackPearl {
  background-color: #050523;
}

.bg-navyBlue {
  background-color: #020b26;
}

.bg-midnightBlue {
  background-color: #010818;
}

.text-cyan {
  color: #40ffff;
}

.bg-cyan {
  background-color: #40ffff;
}

.text-wispPink {
  color: #fef4f8;
}

.bg-wispPink {
  background-color: #fef4f8;
}

.bg-gallery {
  background-color: #efefef;
}

.border-gallery {
  border-color: #efefef;
}

.focus\:border-cyan:focus {
  border-color: #40ffff;
}

.hover\:text-cyan:hover {
  color: #40ffff;
}

.hover\:text-razzmatazz:hover {
  color: #d80650;
}

.from-deepCove {
  --tw-gradient-from: #08143b var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(8 20 59 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-navyBlue {
  --tw-gradient-from: #020b26 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(2 11 38 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-midnightBlue {
  --tw-gradient-from: #010818 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(1 8 24 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-blackPearl {
  --tw-gradient-to: #050523 var(--tw-gradient-to-position);
}

.to-navyBlue {
  --tw-gradient-to: #020b26 var(--tw-gradient-to-position);
}

.to-midnightBlue {
  --tw-gradient-to: #010818 var(--tw-gradient-to-position);
}

.via-navyBlue {
  --tw-gradient-stops: var(--tw-gradient-from), #020b26 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-midnightBlue {
  --tw-gradient-stops: var(--tw-gradient-from), #010818 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.border-deepCove {
  border-color: #08143b;
}

.text-white\/80 {
  color: rgba(255, 255, 255, 0.8);
}

.text-white\/70 {
  color: rgba(255, 255, 255, 0.7);
}

.border-white\/20 {
  border-color: rgba(255, 255, 255, 0.2);
}

.border-blackPearl {
  border-color: #050523;
}

.border-deepCove\/30 {
  border-color: rgba(8, 20, 59, 0.3);
}

.hover\:bg-white\/10:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* New gradient and animation classes */
.bg-grid-pattern {
  background-image: linear-gradient(to right, rgba(64, 255, 255, 0.2) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(64, 255, 255, 0.2) 1px, transparent 1px);
  background-size: 60px 60px;
}

.bg-circuit-pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='%2340ffff' fill-opacity='0.1'%3E%3Cpath d='M0 0h100v100H0z'/%3E%3Cpath d='M0 0h50v50H0zM50 50h50v50H50z' fill='%23d80650'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100px 100px;
}

.bg-dots-pattern {
  background-image: radial-gradient(#40ffff 1px, transparent 1px);
  background-size: 20px 20px;
}

.bg-hex-pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='%2340ffff' fill-opacity='0.1'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/svg%3E");
}

.bg-nodes-pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='%2340ffff' fill-opacity='0.1'%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Ccircle cx='30' cy='10' r='2'/%3E%3Ccircle cx='50' cy='10' r='2'/%3E%3Ccircle cx='70' cy='10' r='2'/%3E%3Ccircle cx='90' cy='10' r='2'/%3E%3Ccircle cx='10' cy='30' r='2'/%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3Ccircle cx='50' cy='30' r='2'/%3E%3Ccircle cx='70' cy='30' r='2'/%3E%3Ccircle cx='90' cy='30' r='2'/%3E%3Ccircle cx='10' cy='50' r='2'/%3E%3Ccircle cx='30' cy='50' r='2'/%3E%3Ccircle cx='50' cy='50' r='2'/%3E%3Ccircle cx='70' cy='50' r='2'/%3E%3Ccircle cx='90' cy='50' r='2'/%3E%3Ccircle cx='10' cy='70' r='2'/%3E%3Ccircle cx='30' cy='70' r='2'/%3E%3Ccircle cx='50' cy='70' r='2'/%3E%3Ccircle cx='70' cy='70' r='2'/%3E%3Ccircle cx='90' cy='70' r='2'/%3E%3Ccircle cx='10' cy='90' r='2'/%3E%3Ccircle cx='30' cy='90' r='2'/%3E%3Ccircle cx='50' cy='90' r='2'/%3E%3Ccircle cx='70' cy='90' r='2'/%3E%3Ccircle cx='90' cy='90' r='2'/%3E%3C/g%3E%3C/svg%3E");
}

.bg-binary-pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='%2340ffff' fill-opacity='0.1'%3E%3Ctext x='10' y='20' font-family='monospace' font-size='10'>01001</text%3E%3Ctext x='10' y='40' font-family='monospace' font-size='10'>10110</text%3E%3Ctext x='10' y='60' font-family='monospace' font-size='10'>01101</text%3E%3Ctext x='10' y='80' font-family='monospace' font-size='10'>11010</text%3E%3C/g%3E%3C/svg%3E");
}

.bg-wave-pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='18' viewBox='0 0 100 18'%3E%3Cpath fill='%2340ffff' fill-opacity='0.1' d='M61.82 18c3.47-1.45 6.86-3.78 11.3-7.34C78 6.76 80.34 5.1 83.87 3.42 88.56 1.16 93.75 0 100 0v6.16C98.76 6.05 97.43 6 96 6c-9.59 0-14.23 2.23-23.13 9.34-1.28 1.03-2.39 1.9-3.4 2.66h-7.65zm-23.64 0H22.52c-1-.76-2.1-1.63-3.4-2.66C11.57 9.3 7.08 6.78 0 6.16V0c6.25 0 11.44 1.16 16.14 3.42 3.53 1.7 5.87 3.35 10.73 7.24 4.45 3.56 7.84 5.9 11.31 7.34zM61.82 0h7.66a39.57 39.57 0 0 1-7.34 4.58C57.44 6.84 52.25 8 46 8S34.56 6.84 29.86 4.58A39.57 39.57 0 0 1 22.52 0h15.66C41.65 1.44 45.21 2 50 2c4.8 0 8.35-.56 11.82-2z'%3E%3C/path%3E%3C/svg%3E");
}

/* Enhanced shadow effects */
.shadow-glow-cyan {
  box-shadow: 0 0 5px rgba(64, 255, 255, 0.2);
}

.hover\:shadow-glow-cyan-intense:hover {
  box-shadow: 0 0 20px rgba(64, 255, 255, 0.5), 0 0 40px rgba(64, 255, 255, 0.2);
}

.hover\:shadow-glow-cyan-soft:hover {
  box-shadow: 0 0 10px rgba(64, 255, 255, 0.15);
}

.shadow-glow-cyan-input {
  box-shadow: 0 0 5px rgba(64, 255, 255, 0.2);
}

.shadow-glow-pink {
  box-shadow: 0 0 5px rgba(216, 6, 80, 0.2);
}

.hover\:shadow-glow-pink-intense:hover {
  box-shadow: 0 0 20px rgba(216, 6, 80, 0.5), 0 0 40px rgba(216, 6, 80, 0.2);
}

.hover\:shadow-glow-pink-soft:hover {
  box-shadow: 0 0 10px rgba(216, 6, 80, 0.15);
}

.shadow-glow-pink-input {
  box-shadow: 0 0 5px rgba(216, 6, 80, 0.2);
}

.hover\:shadow-glow-mixed:hover {
  box-shadow: 0 0 15px rgba(64, 255, 255, 0.3), 0 0 30px rgba(216, 6, 80, 0.2);
}

.shadow-glow-blue {
  box-shadow: 0 0 10px rgba(8, 20, 59, 0.5);
}

.text-glow-cyan {
  text-shadow: 0 0 10px rgba(64, 255, 255, 0.5);
}