/* Centrale vormgevingsvariabelen voor MACC Foundation. */
:root {
    --macc-color-background: #5ce1d8;
    --macc-color-background-deep: #0d1821;
    --macc-color-surface: #17232b;
    --macc-color-surface-soft: rgba(45, 65, 77, 0.58);
    --macc-color-text: #f2ede4;
    --macc-color-text-muted: rgba(242, 237, 228, 0.72);
    --macc-color-accent: #2fd3c9;
    --macc-color-accent-hover: #5ce1d8;
    --macc-color-border: rgba(242, 237, 228, 0.14);
    --macc-color-border-strong: rgba(242, 237, 228, 0.35);
    --macc-focus-ring: rgba(47, 211, 201, 0.3);
    --macc-content-width: 1440px;
}

body.macc-foundation-layout {
    min-height: 100%;
    margin: 0;
    background-color: var(--macc-color-background);
    background-image:
        radial-gradient(
            ellipse at top right,
            rgba(45, 65, 77, 0.65) 0%,
            rgba(24, 39, 49, 0.45) 35%,
            rgba(16, 27, 36, 0) 70%
        ),
        linear-gradient(
            135deg,
            var(--macc-color-background) 0%,
            #14242f 45%,
            var(--macc-color-background-deep) 100%
        );
    background-attachment: fixed;
    color: var(--macc-color-text);
}

.macc-foundation-layout :focus-visible {
    outline-color: var(--macc-color-accent);
}