/* DirectoryDream Styles - Tailwind CDN + Custom CSS */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* CSS Variables - Matching React version */
:root {
    /* Primary Brand Colors - Trust Blue */
    --primary: 217 91% 50%;
    --primary-foreground: 0 0% 100%;
    --primary-hover: 217 91% 45%;
    --primary-light: 217 91% 95%;
    
    /* Action/CTA Orange */
    --accent: 24 95% 53%;
    --accent-foreground: 0 0% 100%;
    --accent-hover: 24 95% 48%;
    --accent-light: 24 95% 95%;
    
    /* Success - Green */
    --success: 142 71% 45%;
    --success-foreground: 0 0% 100%;
    --success-light: 142 71% 95%;
    
    /* Warning */
    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 0%;
    --warning-light: 38 92% 95%;
    
    /* Destructive - Red */
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --destructive-light: 0 84% 95%;
    
    /* Backgrounds */
    --background: 210 20% 98%;
    --foreground: 222 47% 11%;
    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;
    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;
    
    /* Secondary & Muted */
    --secondary: 210 20% 96%;
    --secondary-foreground: 222 47% 11%;
    --muted: 215 16% 93%;
    --muted-foreground: 215 16% 47%;
    
    /* Borders & Inputs */
    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 217 91% 50%;
    
    /* Rating Stars */
    --star-filled: 45 93% 47%;
    --star-empty: 215 16% 85%;
    
    /* Pros & Cons */
    --pro-bg: 142 71% 95%;
    --pro-icon: 142 71% 45%;
    --con-bg: 0 84% 97%;
    --con-icon: 0 84% 60%;
    
    /* Radius */
    --radius: 0.625rem;
}

* {
    box-sizing: border-box;
    border-color: hsl(var(--border));
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.font-display {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
}

/* Utility Classes */
.text-star-filled {
    color: hsl(var(--star-filled));
}

.text-star-empty {
    color: hsl(var(--star-empty));
}

.fill-star-filled {
    fill: hsl(var(--star-filled));
}

.bg-primary {
    background-color: hsl(var(--primary));
}

.text-primary-foreground {
    color: hsl(var(--primary-foreground));
}

.text-primary {
    color: hsl(var(--primary));
}

.bg-secondary {
    background-color: hsl(var(--secondary));
}

.text-foreground {
    color: hsl(var(--foreground));
}

.text-muted-foreground {
    color: hsl(var(--muted-foreground));
}

.bg-card {
    background-color: hsl(var(--card));
}

.border-border {
    border-color: hsl(var(--border));
}

.bg-background {
    background-color: hsl(var(--background));
}

.text-accent {
    color: hsl(var(--accent));
}

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

.text-success {
    color: hsl(var(--success));
}

.bg-success-light {
    background-color: hsl(var(--success-light));
}

/* Hero Gradient */
.hero-gradient {
    background: linear-gradient(135deg, 
        hsl(var(--primary) / 0.04) 0%, 
        hsl(var(--background)) 50%,
        hsl(var(--accent) / 0.04) 100%);
}

/* Section Gradient */
.section-gradient {
    background: linear-gradient(180deg, 
        hsl(var(--background)) 0%, 
        hsl(var(--secondary)) 100%);
}

/* Card Hover */
.card-hover {
    transition: all 0.3s ease-out;
    box-shadow: 0 1px 3px hsl(var(--foreground) / 0.06), 0 1px 2px hsl(var(--foreground) / 0.04);
}

.card-hover:hover {
    box-shadow: 0 10px 40px hsl(var(--foreground) / 0.12);
    transform: translateY(-4px);
}

/* Gradient Text */
.gradient-text {
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Pros/Cons */
.pro-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--radius);
    background: hsl(var(--pro-bg));
}

.con-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--radius);
    background: hsl(var(--con-bg));
}

/* Focus Styles */
input:focus,
textarea:focus,
select:focus {
    outline: none;
    ring: 2px;
    ring-color: hsl(var(--ring));
    ring-offset: 2px;
    ring-offset-color: hsl(var(--background));
}

/* Backdrop Blur */
.backdrop-blur-md {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Transitions */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-colors {
    transition-property: color, background-color, border-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.duration-300 {
    transition-duration: 300ms;
}

.duration-200 {
    transition-duration: 200ms;
}

/* Opacity */
.opacity-0 {
    opacity: 0;
}

.opacity-100 {
    opacity: 1;
}

/* Visibility */
.visible {
    visibility: visible;
}

.invisible {
    visibility: hidden;
}

/* Hover effects */
.group:hover .group-hover\:visible {
    visibility: visible;
}

.group:hover .group-hover\:opacity-100 {
    opacity: 1;
}

.group:hover .group-hover\:text-primary {
    color: hsl(var(--primary));
}

/* Line clamp */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}