/* Servifyr - Main Stylesheet */
/* Industrial Elegance Design System */

:root {
    /* Primary Palette */
    --color-bg-primary: #fafaf9;
    --color-bg-secondary: #f5f5f4;
    --color-bg-tertiary: #e7e5e4;
    --color-bg-dark: #1c1917;
    --color-bg-darker: #0c0a09;

    /* Text Colors */
    --color-text-primary: #1c1917;
    --color-text-secondary: #57534e;
    --color-text-tertiary: #a8a29e;
    --color-text-inverse: #fafaf9;

    /* Accent Colors */
    --color-accent-gold: #d97706;
    --color-accent-gold-hover: #b45309;
    --color-accent-green: #059669;
    --color-accent-red: #dc2626;

    /* Border Colors */
    --color-border-light: #e7e5e4;
    --color-border-medium: #d6d3d1;
    --color-border-dark: #44403c;
}

/* Base Styles */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Merriweather', Georgia, serif;
}

/* E-Paper Screen Simulation */
.e-paper-screen {
    background-color: #f5f5f4;
    color: #1c1917;
    font-family: 'Inter', sans-serif;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
    filter: contrast(1.1) brightness(0.95);
}

/* Chart Container */
.chart-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    height: 300px;
}

@media (min-width: 768px) {
    .chart-container {
        height: 400px;
    }
}

/* Slider Styling */
.slider-thumb::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--color-accent-gold);
    cursor: pointer;
    border-radius: 50%;
}

.slider-thumb::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--color-accent-gold);
    cursor: pointer;
    border-radius: 50%;
}

/* Focus States for Accessibility */
:focus-visible {
    outline: 2px solid var(--color-accent-gold);
    outline-offset: 2px;
}

/* Skip Link for Accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-bg-dark);
    color: var(--color-text-inverse);
    padding: 8px;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
}

/* Animation Classes */
.animate-fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger Animation Delays */
.stagger-1 { transition-delay: 0ms; }
.stagger-2 { transition-delay: 100ms; }
.stagger-3 { transition-delay: 200ms; }
.stagger-4 { transition-delay: 300ms; }

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Button Hover Effects */
.btn-primary {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(28, 25, 23, 0.3);
}

/* Card Hover Effects */
.feature-card {
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Form Input Focus */
.form-input {
    transition: all 0.2s ease;
    border: 2px solid var(--color-border-light);
}

.form-input:focus {
    border-color: var(--color-accent-gold);
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.1);
    outline: none;
}

/* Mobile Menu */
.mobile-menu {
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
}

.mobile-menu.open {
    transform: translateX(0);
}

/* Dropdown Animation */
.nav-dropdown {
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    transition: all 0.2s ease-out;
}

.nav-item:hover .nav-dropdown,
.nav-dropdown.show {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* FAQ Accordion */
.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.faq-item.open .faq-content {
    max-height: 500px;
}

.faq-chevron {
    transition: transform 0.3s ease;
}

.faq-item.open .faq-chevron {
    transform: rotate(180deg);
}