:root {
    /* Brand */
    --vgl-color-accent: #f2504e;
    --vgl-color-primary: #006bbd;
    --vgl-color-accent-hover: #d94341;
    --vgl-color-primary-hover: #005a9e;
    --vgl-color-accent-soft: rgba(242, 80, 78, 0.1);
    --vgl-color-primary-soft: rgba(0, 107, 189, 0.1);

    /* Neutrals */
    --vgl-color-bg: #ffffff;
    --vgl-color-bg-alt: #f5f7fa;
    --vgl-color-surface: #ffffff;
    --vgl-color-border: #e2e8f0;
    --vgl-color-text: #1a202c;
    --vgl-color-text-muted: #64748b;
    --vgl-color-text-inverse: #ffffff;

    /* Semantic */
    --vgl-color-success: #16a34a;
    --vgl-color-warning: #f59e0b;
    --vgl-color-danger: #dc2626;
    --vgl-color-deal: var(--vgl-color-accent);
    --vgl-color-link: var(--vgl-color-primary);

    /* Typography */
    --vgl-font-family: 'Raleway', system-ui, -apple-system, sans-serif;
    --vgl-font-size-xs: 0.75rem;
    --vgl-font-size-sm: 0.875rem;
    --vgl-font-size-base: 1rem;
    --vgl-font-size-lg: 1.125rem;
    --vgl-font-size-xl: 1.25rem;
    --vgl-font-size-2xl: 1.5rem;
    --vgl-font-size-3xl: 2rem;
    --vgl-line-height: 1.5;
    --vgl-line-height-tight: 1.25;

    /* Spacing */
    --vgl-space-1: 0.25rem;
    --vgl-space-2: 0.5rem;
    --vgl-space-3: 0.75rem;
    --vgl-space-4: 1rem;
    --vgl-space-5: 1.25rem;
    --vgl-space-6: 1.5rem;
    --vgl-space-8: 2rem;
    --vgl-space-10: 2.5rem;
    --vgl-space-12: 3rem;

    /* Layout */
    --vgl-container-max: 1200px;
    --vgl-sidebar-width: 280px;
    --vgl-content-sidebar-ratio: 2fr 1fr;
    --vgl-radius-sm: 4px;
    --vgl-radius: 8px;
    --vgl-radius-lg: 12px;
    --vgl-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --vgl-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    --vgl-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

    /* Breakpoints (for reference in media queries) */
    --vgl-bp-sm: 480px;
    --vgl-bp-md: 768px;
    --vgl-bp-lg: 1024px;
    --vgl-bp-xl: 1200px;

    /* Transitions */
    --vgl-transition: 0.2s ease;
}

/* Deal / discount badges — always brand red, not primary blue */
.price-reduction,
.price-changing.price-reduction,
.merchant-price-reduction {
    background-color: var(--vgl-color-accent);
    color: var(--vgl-color-text-inverse);
}