@import "tailwindcss";

/* Custom CSS Variables matching the original */
:root {
    --background: 210 40% 2%; /* hsl(210, 40%, 2%) */
    --foreground: 0 0% 98%; /* hsl(0, 0%, 98%) */
    --card: 210 40% 4%; /* hsl(210, 40%, 4%) */
    --card-foreground: 0 0% 98%; /* hsl(0, 0%, 98%) */
    --primary: 0 0% 98%; /* hsl(0, 0%, 98%) */
    --primary-foreground: 210 40% 2%; /* hsl(210, 40%, 2%) */
    --secondary: 48 100% 67%; /* hsl(48, 100%, 67%) - yellow/gold */
    --secondary-foreground: 210 40% 2%; /* hsl(210, 40%, 2%) */
    --muted: 210 40% 6%; /* hsl(210, 40%, 6%) */
    --muted-foreground: 215 20.2% 65.1%; /* hsl(215, 20.2%, 65.1%) */
    --accent: 48 100% 67%; /* hsl(48, 100%, 67%) */
    --accent-foreground: 210 40% 2%; /* hsl(210, 40%, 2%) */
    --border: 210 40% 8%; /* hsl(210, 40%, 8%) */
}

.bg-background { background-color: hsl(210, 40%, 2%); }
.bg-card { background-color: hsl(210, 40%, 4%); }
.bg-secondary { background-color: hsl(48, 100%, 67%); }
.text-foreground { color: hsl(0, 0%, 98%); }
.text-muted-foreground { color: hsl(215, 20.2%, 65.1%); }
.text-accent { color: hsl(48, 100%, 67%); }
.text-secondary { color: hsl(48, 100%, 67%); }
.bg-accent\/10 { background-color: hsla(48, 100%, 67%, 0.1); }
.border-border { border-color: hsl(210, 40%, 8%); }

/* Form input fixes for visibility */
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
    background-color: hsl(210, 40%, 6%) !important;
    color: hsl(0, 0%, 98%) !important;
    border: 1px solid hsl(210, 40%, 20%) !important;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, select:focus, textarea:focus {
    background-color: hsl(210, 40%, 8%) !important;
    border-color: hsl(48, 100%, 67%) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px hsla(48, 100%, 67%, 0.2) !important;
}

/* Select dropdown styling */
select option {
    background-color: hsl(210, 40%, 6%);
    color: hsl(0, 0%, 98%);
}

/* Match original button styles */
.btn-nav {
    background-color: rgb(31, 41, 55);
    color: white;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-right: 1px solid rgb(75, 85, 99);
    transition: background-color 0.2s;
}
.btn-nav:hover { background-color: rgb(55, 65, 81); }
.btn-nav:first-child { border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; }
.btn-nav:last-child { 
    border-top-right-radius: 0.375rem; 
    border-bottom-right-radius: 0.375rem; 
    border-right: none;
}

/* Highlighted navigation item - Stone Sales */
.btn-nav-highlight {
    background-color: hsl(48, 100%, 67%) !important;
    color: hsl(210, 40%, 2%) !important;
    font-weight: 600 !important;
}
.btn-nav-highlight:hover { 
    background-color: hsl(48, 100%, 75%) !important;
}

/* Image hover effects */
.project-image {
    transition: transform 0.3s ease;
}
.project-image:hover { transform: scale(1.05); }

/* Carousel styles */
.carousel-container {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    border: 1px solid hsl(210, 40%, 8%);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.thumbnail-nav button {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 0.25rem;
    border: 2px solid hsl(210, 40%, 8%);
    transition: all 0.2s;
    cursor: pointer;
    background: none;
    padding: 0;
    min-height: 60px;
    display: block;
}

.thumbnail-nav button.active {
    border-color: hsl(48, 100%, 67%);
    box-shadow: 0 0 0 2px hsla(48, 100%, 67%, 0.2);
}

.thumbnail-nav button:hover {
    border-color: hsl(48, 100%, 67%);
    transform: scale(1.05);
}

.thumbnail-nav button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Mobile menu */
.mobile-menu { 
    display: none; 
    background-color: hsl(210, 40%, 2%);
    border-top: 1px solid rgb(75, 85, 99);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}
.mobile-menu.active { display: block; }

/* Smooth scrolling */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 100px; }