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

:root {
    --color-accent: #00E5FF;
    --font-inter: 'Inter', sans-serif;
    --font-montserrat: 'Montserrat', sans-serif;
}

body {
    background-color: #121212;
    color: #ffffff;
}

.font-montserrat {
    font-family: var(--font-montserrat);
}

.font-inter {
    font-family: var(--font-inter);
}

/* Typography */
.h1 {
    @apply text-6xl font-bold;
}

.h2 {
    @apply text-4xl font-bold;
}

.h3 {
    @apply text-3xl font-bold;
}

.h4 {
    @apply text-2xl font-bold;
}

@media (min-width: 768px) {
    .h1 {
        @apply text-7xl;
    }

    .h2 {
        @apply text-5xl;
    }
}

/* Buttons */
.btn,
.btn-sm {
    @apply font-medium inline-flex items-center justify-center rounded-sm leading-normal transition duration-150 ease-in-out;
}

.btn {
    @apply px-6 py-3;
}

.btn-sm {
    @apply px-4 py-2;
}

/* Custom animations */
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0px);
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(0, 229, 255, 0.1);
    }
    50% {
        box-shadow: 0 0 30px rgba(0, 229, 255, 0.2);
    }
}

/* SVG Color Consistency */
svg {
    color-interpolation: sRGB;
    color-rendering: optimizeQuality;
}

svg path[fill="#00E5FF"] {
    fill: var(--color-accent);
}

/* Custom utilities */
.text-cyan-400 {
    color: var(--color-accent);
}

.bg-cyan-400 {
    background-color: var(--color-accent);
}

.hover\:bg-cyan-500:hover {
    background-color: #00c4e0;
}

.hover\:text-cyan-400:hover {
    color: var(--color-accent);
}

.hover\:border-cyan-400:hover {
    border-color: var(--color-accent);
}

/* Background gradients */
.bg-linear-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.from-blue-600 {
    --tw-gradient-from: var(--color-accent);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(37, 99, 235, 0));
}

.to-blue-400 {
    --tw-gradient-to: #00E5FF;
}

.hover\:to-blue-500:hover {
    --tw-gradient-to: #00c4e0;
}

/* Forms */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

.form-input,
.form-textarea,
.form-multiselect,
.form-select,
.form-checkbox,
.form-radio {
    @apply rounded-sm border border-gray-700 focus:ring-0 focus:ring-offset-0;
}

.form-input,
.form-textarea,
.form-multiselect,
.form-select {
    @apply bg-gray-800 py-3 px-4 focus:border-cyan-400;
}

.form-input,
.form-textarea {
    @apply placeholder-gray-500 leading-snug;
}

/* Contact Page Enhancements */
.contact-card {
    @apply bg-gray-800/50 backdrop-blur-sm rounded-2xl shadow-xl border border-gray-700/50;
    transition: all 0.3s ease;
}

.contact-card:hover {
    @apply border-gray-600/50;
    box-shadow: 0 20px 50px -12px rgba(0, 229, 255, 0.1);
}

.contact-info-item {
    @apply p-4 rounded-xl bg-gray-900/50 transition-all duration-300;
}

.contact-info-item:hover {
    @apply bg-gray-900/70;
    transform: translateX(4px);
}

.contact-info-item.clickable:hover {
    @apply bg-cyan-400/10 border border-cyan-400/30;
}

.icon-wrapper {
    @apply flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg bg-cyan-400/10 transition-all duration-300;
}

.contact-info-item:hover .icon-wrapper {
    @apply bg-cyan-400/20;
    transform: scale(1.1);
}

/* Form Focus States */
input:focus,
textarea:focus,
select:focus {
    @apply ring-2 ring-cyan-500 border-transparent;
}

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