/* Tokens transferred from the existing Schulz Bricks design system. */
:root {
    --color-primary: #2454d6;
    --color-primary-hover: #193fa6;
    --color-brand-light: #6495ed;
    --color-text: #172744;
    --color-text-muted: #526178;
    --color-background: #fff;
    --color-surface: #edf3ff;
    --color-surface-neutral: #f4f6fa;
    --color-accent: #ffe0bd;
    --color-border: #d9e1ee;
    --color-input-border: #8290a4;
    --color-success: #247044;
    --color-error: #b42332;
    --font-family: 'Trebuchet MS', Arial, sans-serif;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --radius-control: .5rem;
    --radius-card: 1rem;
    --radius-feature: 1.5rem;
    --content-max: 80rem;
    --page-gutter: 1rem;
    --section-space: 2.5rem;
    --panel-padding: clamp(1.25rem, 2.5vw, 2rem);
    --heading-h1: clamp(2.125rem, 1.2rem + 3.1vw, 4rem);
    --heading-h2: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
    --heading-h3: clamp(1.125rem, 1rem + .5vw, 1.5rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; }
body { margin: 0; color: var(--color-text); background: var(--color-background); font: 400 1rem/1.6 var(--font-family); overflow-wrap: anywhere; }
h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
h1 { font-size: var(--heading-h1); line-height: 1.1; }
h2 { font-size: var(--heading-h2); line-height: 1.2; }
h3, .heading-small, .footer-heading { font-size: var(--heading-h3); line-height: 1.3; }
h1, h2 { text-wrap: balance; }
a { color: var(--color-primary); text-underline-offset: .2em; }
a:hover { color: var(--color-primary-hover); }
img, svg { max-width: 100%; height: auto; }
input, select, textarea, button { font: inherit; }
button, input[type=submit] { cursor: pointer; }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea {
    max-width: 100%; min-height: 2.75rem; padding: .8125rem 1rem;
    color: var(--color-text); background: var(--color-background); border: 1px solid var(--color-input-border); border-radius: var(--radius-control);
}
input::placeholder { color: var(--color-text-muted); opacity: 1; }
:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 4px; }
:target { scroll-margin-top: 2rem; }
address { font-style: normal; }
[hidden] { display: none !important; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; inset-inline-start: 1rem; top: 0; padding: .5rem 1rem; background: var(--color-background); transform: translateY(-120%); z-index: 1000; }
.skip-link:focus { transform: translateY(0); }
.text-muted { color: var(--color-text-muted); }
@media (min-width: 720px) { :root { --page-gutter: 1.5rem; --section-space: 4rem; } }
@media (min-width: 1101px) { :root { --page-gutter: 3rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }