:root {
    --bg: #fdfdfd;
    --panel: #ffffff;
    --text: #2d3436;
    --muted: #636e72;
    --brand: #a29bfe; /* soft lilac/lavender */
    --accent: #55efc4; /* soft mint */
    --border: #dfe6e9;
    --shadow: rgba(0,0,0,0.05);
    --font-main: 'Inter', system-ui, -apple-system, sans-serif;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-main);
}

.logo {
    color: var(--text);
}

.nav a {
    color: var(--text);
}

.nav a:hover:not(.btn) {
    color: var(--brand);
}

.nav a.active {
    color: var(--brand);
    border-bottom-color: var(--brand);
}

@media (max-width: 768px) {
    .nav {
        background: var(--panel);
        border-bottom-color: var(--border);
        box-shadow: 0 10px 15px var(--shadow);
    }

    .nav a.active {
        color: var(--brand);
    }

    .nav-toggle .bar {
        background: var(--text);
    }
}

.contact-form {
    background: var(--panel);
    border-color: var(--border);
    box-shadow: 0 4px 6px var(--shadow);
}

.form-row label {
    color: var(--text);
}

.form-row input, 
.form-row textarea {
    border-color: var(--border);
    background-color: #fff;
}

.form-row input:focus, 
.form-row textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(162, 155, 254, 0.1);
}

.contact-info a {
    color: var(--brand);
}

.hero {
    background: linear-gradient(to bottom, #f9f9ff, #ffffff);
}

.hero h1 {
    color: #1e272e;
}

.hero p {
    color: var(--muted);
}

.section-title p {
    color: var(--muted);
}

.about-image img {
    box-shadow: 0 10px 30px var(--shadow);
}

.about-content p {
    color: var(--muted);
}

.group-title {
    border-bottom-color: var(--brand);
}

.empty-message {
    color: var(--muted);
    background: #f8f9fa;
}

.breadcrumbs ol {
    color: var(--muted);
}

.breadcrumbs li + li::before {
    color: var(--border);
}

.breadcrumbs a {
    color: var(--muted);
}

.breadcrumbs a:hover {
    color: var(--brand);
}

.breadcrumbs li[aria-current="page"] {
    color: var(--text);
}

.portfolio-filter {
    background: rgba(255, 255, 255, 0.92);
    border-bottom-color: var(--border);
}

.portfolio-filter.is-stuck {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 6px 20px var(--shadow);
    border-color: var(--brand);
}

.portfolio-filter::before {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
}

.portfolio-filter a {
    color: var(--text);
    border-color: var(--border);
}

.portfolio-filter.is-stuck a {
    border-color: var(--brand);
}

.portfolio-filter a:hover {
    background: var(--brand);
    color: #000000;
    border-color: var(--brand);
}

.product-card {
    background: var(--panel);
    border-color: var(--border);
}

.product-card:hover {
    box-shadow: 0 10px 20px var(--shadow);
}

.product-image {
    background: #f1f2f6;
}

.product-image::after {
    background: var(--brand);
}

.product-info p {
    color: var(--muted);
}

.modal-dialog {
    background: var(--panel);
    border-color: var(--border);
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.modal-caption {
    color: var(--text);
}

.modal-close:hover {
    color: var(--brand);
}

.modal-nav:hover {
    background: var(--brand);
    color: #000000;
}

.back-to-top {
    background: var(--brand);
    color: #000000;
    box-shadow: 0 4px 12px var(--shadow);
}

.back-to-top:hover {
    background: #6c5ce7;
    color: #ffffff;
}

.site-footer {
    background: #f1f2f6;
    border-top-color: var(--border);
}

.footer-info strong {
    color: var(--text);
}

.footer-social a {
    color: var(--muted);
}

.footer-social a:hover {
    color: var(--brand);
}

.btn-primary {
    background: var(--brand);
    color: #000000;
}

.btn-primary:hover { 
    background: #6c5ce7;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(162, 155, 254, 0.3);
}

.btn-secondary {
    color: var(--text);
    border-color: var(--brand);
}

.btn-secondary:hover {
    background: var(--brand);
    color: #000000;
    box-shadow: 0 4px 12px rgba(162, 155, 254, 0.3);
}

.cta-section {
    background: #f8f9fa;
}

.cta-section p {
    color: var(--muted);
}