/* 
Theme: EindjeReizen Design System
Version: 1.0.0
*/

:root {
    /* Kleuren */
    --er-color-bg: #ffffff;
    --er-color-bg-alt: #f9f9f9;
    --er-color-text: #333333;
    --er-color-text-light: #666666;
    --er-color-accent: #2c7a7b;
    /* Rustig teal/groen */
    --er-color-accent-hover: #234e52;
    --er-color-border: #e2e8f0;

    /* Spacing */
    --er-spacing-xs: 0.5rem;
    --er-spacing-sm: 1rem;
    --er-spacing-md: 2rem;
    --er-spacing-lg: 4rem;
    --er-spacing-xl: 8rem;

    /* Radius & Shadow */
    --er-radius-sm: 4px;
    --er-radius-md: 8px;
    --er-radius-lg: 16px;
    --er-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --er-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --er-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* Typography */
    --er-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Global Styles */
body {
    background-color: var(--er-color-bg);
    color: var(--er-color-text);
    font-family: var(--er-font-sans);
    line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--er-color-text);
    font-weight: 700;
    margin-bottom: var(--er-spacing-sm);
}

a {
    color: var(--er-color-accent);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--er-color-accent-hover);
}

/* Components */

/* Cards */
.er-card {
    background: white;
    border-radius: var(--er-radius-md);
    box-shadow: var(--er-shadow-sm);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid var(--er-color-border);
}

.er-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--er-shadow-hover);
}

.er-card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background-color: var(--er-color-bg-alt);
}

.er-card-content {
    padding: var(--er-spacing-sm);
}

/* Buttons */
.er-btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: var(--er-radius-sm);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.er-btn-primary:hover {
    background-color: var(--er-color-accent-hover);
    color: white;
}

.er-btn-secondary {
    background-color: transparent;
    border: 2px solid var(--er-color-accent);
    color: var(--er-color-accent);
}

.er-btn-secondary:hover {
    background-color: var(--er-color-accent);
    color: white;
}

/* Utility */
.er-text-center {
    text-align: center;
}

.er-mt-md {
    margin-top: var(--er-spacing-md);
}

.er-mb-md {
    margin-bottom: var(--er-spacing-md);
}

.er-section {
    padding: var(--er-spacing-lg) 0;
}