/*
 * Theme base stylesheet for the shop theme engine.
 *
 * This file defines the full set of CSS custom properties (variables) that
 * theme files override. It is loaded on every storefront page, followed by the
 * active theme file.
 */

:root {
    --color-primary: #2563eb;
    --color-secondary: #1d4ed8;
    --color-accent: #f59e0b;

    --color-text: #1f2937;
    --color-heading: #111827;
    --color-muted: #6b7280;

    --color-bg: #ffffff;
    --color-bg-alt: #f9fafb;
    --color-surface: #ffffff;
    --color-border: #e5e7eb;

    --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --hero-overlay-opacity: 0.3;
    --border-radius: 8px;
}

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

h1, h2, h3, h4, h5, h6 {
    color: var(--color-heading);
}

a {
    color: var(--color-primary);
}

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

.site-header {
    background: var(--color-bg-alt);
    border-bottom-color: var(--color-border);
}

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

.site-nav a:hover,
.site-nav a:focus {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.site-footer {
    border-top-color: var(--color-border);
    color: var(--color-muted);
}

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

.hero-with-image .hero-background {
    opacity: var(--hero-overlay-opacity);
}

.item-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}

.review-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}

.about-section,
.contact-section {
    background: var(--color-bg-alt);
}

input[type="text"],
input[type="email"],
textarea,
select {
    border-color: var(--color-border);
}