/* Custom styles for The Workspace Pro */

.hero-bg {
    background-image: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)), url('/static/images/products/bekant-desk-1600.jpg');
    background-size: cover;
    background-position: center;
}
.product-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #888; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #555; }
/* Ensure our custom colors are available as CSS variables for dark mode */
:root {
    --color-surface: #fefcf8;
    --color-card: #ffffff;
    --color-border: #e8e3da;
    --color-primary: #2a6b7e;
    --color-accent: #c86b4a;
    --font-family-display: 'Playfair Display', serif;
}
.dark {
    --color-surface: #0f172a;
    --color-card: #1e293b;
    --color-border: #334155;
    --color-primary: #4a8fa3; /* lighter teal for dark mode */
    --color-accent: #e48c6d; /* lighter terracotta for dark mode */
}
.bg-surface { background-color: var(--color-surface); }
.bg-card { background-color: var(--color-card); }
.border-border { border-color: var(--color-border); }
.text-primary { color: var(--color-primary); }
.text-accent { color: var(--color-accent); }
.bg-primary { background-color: var(--color-primary); }
.bg-accent { background-color: var(--color-accent); }
.gradient-text {
    background-image: linear-gradient(to right, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.font-display { font-family: var(--font-family-display); }