html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px;
}

:root {
    --brand-red: #E53935;
    --brand-red-hover: #C62828;
    --brand-dark: #0F172A;
    --brand-slate: #1E293B;
    --brand-light: #F8FAFC;
    --brand-muted: #64748B;
    --brand-body: #475569;
    --brand-white: #FFFFFF;
    --brand-border: #E2E8F0;
    --brand-soft-red: #FEE2E2;
    --brand-success: #16A34A;
    --font-body: 'Inter', sans-serif;
    --font-display: 'Playfair Display', serif;
    --font-logo: 'Cinzel', serif;
    --bs-primary: var(--brand-red);
    --bs-primary-rgb: 229, 57, 53;
    --bs-body-color: var(--brand-body);
    --bs-body-bg: var(--brand-light);
    --bs-light: var(--brand-light);
    --bs-dark: var(--brand-dark);
    --bs-border-color: var(--brand-border);
    --bs-link-color: var(--brand-red);
    --bs-link-hover-color: var(--brand-red-hover);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--brand-body);
    background: var(--brand-light);
}

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

a {
    color: var(--brand-red);
    text-decoration: none;
}

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

img {
    max-width: 100%;
    display: block;
}

section[id] {
    scroll-margin-top: 110px;
}

.app-shell {
    min-height: 100vh;
}

.btn-primary {
    --bs-btn-bg: var(--brand-red);
    --bs-btn-border-color: var(--brand-red);
    --bs-btn-hover-bg: var(--brand-red-hover);
    --bs-btn-hover-border-color: var(--brand-red-hover);
    --bs-btn-active-bg: var(--brand-red-hover);
    --bs-btn-active-border-color: var(--brand-red-hover);
}