:root {
    --light-color: var(--color-light);
    --dark-color: var(--color-dark);
    --text-color: var(--color-dark);
    --color-link: var(--color-primary);

    /* ── Surfaces ── */
    --color-background: rgb(246, 247, 251);
    --color-background-white: rgb(255, 255, 255);
    --color-background-grey: rgb(237, 239, 245);
    --color-surface: rgb(255, 255, 255);
    --color-surface-raised: rgb(255, 255, 255);

    /* ── Semantic colors ── */
    --color-text: var(--color-dark);
    --color-danger: rgb(220, 38, 57);
    --color-danger-light: rgb(220, 38, 57);
    --color-danger-dark: rgb(185, 28, 48);
    --color-success: rgb(34, 197, 121);
    --color-success-light: rgb(209, 250, 229);
    --color-success-dark: rgb(21, 160, 94);
    --color-info: rgb(59, 130, 246);
    --color-info-light: rgb(219, 234, 254);
    --color-info-dark: rgb(37, 99, 235);
    --color-warning: rgb(245, 158, 11);
    --color-warning-light: rgb(254, 240, 199);
    --color-warning-dark: rgb(217, 119, 6);
    --color-failure: rgb(185, 28, 28);
    --color-failure-light: rgb(254, 226, 226);
    --color-failure-dark: rgb(153, 27, 27);
    --color-error: var(--color-failure);
    --color-error-light: var(--color-failure-light);
    --color-error-dark: var(--color-failure-dark);
    --color-todo: rgb(236, 72, 153);
    --color-label-text: var(--color-submenu);

    /* ── Neutral palette ── */
    --color-white: rgb(255, 255, 255);
    --color-grey: var(--color-secondary-dark);
    --color-grey-dark: rgb(40, 40, 45);
    --color-light: rgb(250, 250, 252);
    --color-dark: rgb(15, 15, 20);

    --color-secondary: rgb(218, 220, 228);
    --color-secondary-light: rgb(236, 238, 244);
    --color-secondary-dark: rgb(130, 133, 148);

    --color-border: rgb(225, 227, 234);
    --color-border-green: var(--color-success);

    --color-submenu: rgb(80, 83, 98);
    --color-submemu-04: rgba(80, 83, 98, .4);
    --color-submenu-border: rgb(218, 220, 228);
    --color-submenu-border-04: rgba(218, 220, 228, .5);
    --color-submenu-border-015: rgba(218, 220, 228, .15);

    --secondary-color: var(--color-secondary);
    --secondary-light-color: var(--color-secondary-light);
    --secondary-dark-color: var(--color-secondary-dark);
    --secondary-text-color: var(--color-dark);

    /* ── Shadows ── */
    --box-shadow: rgba(0, 0, 0, .10);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.10), 0 4px 10px rgba(0, 0, 0, 0.06);

    /* ── Scrollbar ── */
    --scrollbar-neutral: rgba(0, 0, 0, 0.05);
    --scrollbar-neutral-hovered: rgba(0, 0, 0, 0.12);

    /* ── Spacing ── */
    --space-unit: 16px;
    --space-xxs:  calc(0.25 * var(--space-unit));
    --space-xs:   calc(0.5  * var(--space-unit));
    --space-sm:   calc(0.75 * var(--space-unit));
    --space-md:   calc(1    * var(--space-unit));
    --space-lg:   calc(1.25 * var(--space-unit));
    --space-xl:   calc(1.5  * var(--space-unit));
    --space-xxl:  calc(1.75 * var(--space-unit));
    --space-xxxl: calc(2    * var(--space-unit));

    --space-xxs-negative: calc(var(--space-xxs) * -1);
    --space-xs-negative:  calc(var(--space-xs)  * -1);
    --space-sm-negative:  calc(var(--space-sm)  * -1);
    --space-md-negative:  calc(var(--space-md)  * -1);
    --space-lg-negative:  calc(var(--space-lg)  * -1);

    /* ── Radii ── */
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* ── Typography ── */
    --text-size: 14px;
    --text-base-size: 1em;
    --text-scale-ratio: 1.2;
    --text-xs:  calc((var(--text-size) / var(--text-scale-ratio)) / var(--text-scale-ratio));
    --text-sm:  calc(var(--text-xs)  * var(--text-scale-ratio));
    --text-md:  calc(var(--text-sm)  * var(--text-scale-ratio));
    --text-lg:  calc(var(--text-md)  * var(--text-scale-ratio));
    --text-xl:  calc(var(--text-lg)  * var(--text-scale-ratio));
    --text-xxl: calc(var(--text-xl)  * var(--text-scale-ratio));

    --max-content-width: 720px;
    --break-mobile: 780px;

    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-neutral-hovered) var(--scrollbar-neutral);
}

/* ════════════════════════════════════
   Base
════════════════════════════════════ */

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    background: var(--color-background);
    color: var(--color-dark);
    font-family: 'Roboto', system-ui, -apple-system, sans-serif;
    font-size: var(--text-size);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.25;
    margin: 0;
}

h1 {
    font-weight: 600;
    letter-spacing: -0.025em;
}

h2 {
    font-weight: 600;
    letter-spacing: -0.015em;
}

h3 {
    font-weight: 500;
    letter-spacing: -0.01em;
}

h4, h5, h6 {
    font-weight: 500;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover,
a:active {
    color: inherit;
    text-decoration: underline;
}

label {
    cursor: pointer;
}

code {
    display: inline-block;
    padding: .1em .45em;
    background: var(--color-background-grey);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
    font-size: .875em;
}

pre {
    background: var(--color-background-grey);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: ui-monospace, monospace;
    overflow: auto;
    padding: var(--space-md);
}

/* ════════════════════════════════════
   Layout
════════════════════════════════════ */

.content {
    min-height: 100vh;
}

.highlight-background {
    background-color: var(--color-highlight-02);
}

.highlight-dark-background {
    background-color: var(--color-highlight-05);
}

/* ════════════════════════════════════
   Utility colors
════════════════════════════════════ */

.color-danger {
    color: var(--color-danger);
}

.color-success {
    color: var(--color-success);
}

/* ════════════════════════════════════
   Buttons
════════════════════════════════════ */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 7px 13px;
    background-color: var(--color-background-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    line-height: 1.4;
    color: var(--color-dark);
    font-size: var(--text-size);
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease,
                color 0.12s ease, box-shadow 0.12s ease;
    box-shadow: var(--shadow-xs);
}

.button:disabled,
.button:disabled:hover {
    color: var(--color-secondary-dark);
    background-color: var(--color-secondary-light);
    border-color: var(--color-border);
    box-shadow: none;
    cursor: default;
}

.button:not(.button--transparent):not(.button--danger):not(.button--succes):not(.button--primary):not(:disabled):hover,
a.button:not(.button--transparent):not(.button--danger):not(.button--succes):not(.button--primary):not(:disabled):hover {
    background: var(--color-background-grey);
    border-color: var(--color-secondary);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}

/* Grouped buttons */
.button--left {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.button--middel {
    border-radius: 0;
    border-left: none;
    border-right: none;
}

.button--right {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Sizes */
.button--small {
    padding: 4px 9px;
    font-size: var(--text-sm);
}

.button--large {
    padding: 10px var(--space-lg);
    font-size: var(--text-md);
}

.button--inline {
    padding: 3px 8px;
    font-size: var(--text-sm);
    box-shadow: none;
}

.button--block {
    display: flex;
    width: 100%;
}

.button--no-padding {
    padding: 0;
    box-shadow: none;
}

/* Icon button */
.button--icon {
    padding: 0;
    width: 34px;
    height: 34px;
    background: transparent;
    border: none;
    box-shadow: none;
    line-height: 1;
    border-radius: 50%;
    color: var(--color-submenu);
}

.button--icon:not(.button--transparent):not(.button--danger):hover {
    background: var(--color-background-grey);
    color: var(--color-dark);
}

.button--small.button--icon {
    width: 28px;
    height: 28px;
    font-size: .85em;
}

/* Transparent */
.button--transparent {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

/* Light (white bg, used in header) */
.button--light {
    background-color: var(--color-white);
    border-color: var(--color-border);
    color: var(--color-dark);
}

.button--light:not(:disabled):hover {
    background-color: var(--color-background-grey);
    border-color: var(--color-secondary);
}

/* Primary */
.button--primary,
a.button--primary {
    background-color: var(--color-primary);
    border-color: transparent;
    color: var(--color-light);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.10);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}

.button--primary:not(.button--transparent):not(:disabled):hover,
a.button--primary:not(.button--transparent):not(:disabled):hover {
    background: var(--color-primary-dark);
    border-color: transparent;
    color: var(--color-light);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20), 0 1px 3px rgba(0, 0, 0, 0.12);
}

.button--primary:disabled {
    color: rgba(255, 255, 255, 0.6);
    background-color: var(--color-primary-light);
    box-shadow: none;
}

.button--primary:not(.button--transparent):disabled:hover {
    color: rgba(255, 255, 255, 0.6);
    border-color: transparent;
}

/* Secondary */
.button--secondary,
a.button--secondary {
    background-color: var(--color-background-grey);
    border-color: var(--color-border);
    color: var(--color-dark);
}

.button--secondary:not(.button--transparent, :disabled):hover,
a.button--secondary:not(.button--transparent, :disabled):hover {
    background: var(--color-secondary-light);
    border-color: var(--color-secondary);
    color: var(--color-dark);
}

.button--secondary:not(.button--transparent):disabled:hover {
    background-color: var(--color-background-grey);
    border-color: var(--color-border);
}

/* Danger */
.button--danger:not(.button--icon) {
    background: var(--color-danger);
    border-color: transparent;
    color: var(--color-white);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.button--danger:disabled:hover {
    color: var(--color-white);
}

.button--danger:not(:disabled):hover,
a.button--danger:hover {
    background: var(--color-danger-dark);
    border-color: transparent;
    color: var(--color-white);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* Success */
.button--succes:not(.button--icon) {
    background: var(--color-success);
    border-color: transparent;
    color: var(--color-white);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.button--succes:disabled:hover {
    color: var(--color-white);
}

.button--succes:not(:disabled):hover,
a.button--succes:hover {
    background: var(--color-success-dark);
    border-color: transparent;
    color: var(--color-white);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* ════════════════════════════════════
   Images
════════════════════════════════════ */

.image-fit-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ════════════════════════════════════
   Page title
════════════════════════════════════ */

.page__title {
    margin: 0;
    padding: 4px 0;
    font-family: 'Geogrotesque', system-ui, Arial, sans-serif;
    font-size: var(--text-xxl);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--dark-color);
    line-height: 1.2;
}

/* ════════════════════════════════════
   Alert / description blocks
════════════════════════════════════ */

.info__description,
.warning__description,
.succes__description {
    position: relative;
    margin-bottom: var(--space-md);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-md) var(--space-md) 48px;
    font-size: .9em;
    line-height: 1.55;
}

.info__description:before,
.warning__description:before,
.succes__description:before {
    position: absolute;
    left: var(--space-md);
    top: var(--space-md);
    line-height: 1;
    font-weight: 900;
    font-family: "Icon";
}

.info__description {
    background: var(--color-info-light);
    border: 1px solid rgba(59, 130, 246, 0.25);
    color: rgb(30, 64, 175);
}

.info__description:before {
    content: "\f05a";
    color: var(--color-info);
}

.warning__description {
    background: var(--color-warning-light);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: rgb(120, 60, 0);
}

.warning__description:before {
    content: "\f024";
    color: var(--color-warning);
}

.succes__description {
    background: var(--color-success-light);
    border: 1px solid rgba(34, 197, 121, 0.3);
    color: rgb(20, 83, 45);
}

.succes__description:before {
    content: "\f00c";
    color: var(--color-success-dark);
}

/* ════════════════════════════════════
   Modal
════════════════════════════════════ */

.modal {
    border-radius: var(--radius-lg);
    max-width: 90%;
    margin: 1.5em auto;
    box-shadow: var(--shadow-lg);
}

.modal__template {
    display: none;
    visibility: hidden;
}

/* ════════════════════════════════════
   Links
════════════════════════════════════ */

.link--primary,
a.link--primary {
    color: var(--color-primary);
    font-weight: 500;
}

.link--simple,
a.link--simple {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--color-border);
}

.link--simple:hover,
a.link--simple:hover {
    text-decoration-color: var(--color-dark);
}

/* ════════════════════════════════════
   Typography utilities
════════════════════════════════════ */

.text-sm {
    font-size: var(--text-sm, 0.833em);
}

.text-xs {
    font-size: var(--text-xs, 0.694em);
}

.text-title {
    font-size: var(--text-lg, 1.44em);
    font-weight: 600;
    letter-spacing: -0.01em;
}

h4.text-title {
    margin-bottom: var(--space-sm);
}

.text-description {
    font-size: .875em;
    color: var(--color-secondary-dark);
    line-height: 1.5;
}

/* ════════════════════════════════════
   Dropdown / sub-menu
════════════════════════════════════ */

.sub-menu {
    padding: var(--space-xs) 0;
    font-size: .875em;
    line-height: initial;
    color: var(--color-submenu);
    background: var(--color-background-white);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-md);

    & ul {
        margin: 0;
        padding: 0;
    }

    & li {
        padding: 7px var(--space-sm);
        transition: background 0.08s ease;

        &:hover {
            background: var(--color-background);
        }

        &.separator-before {
            position: relative;
            margin-bottom: var(--space-md);

            &:after {
                content: "";
                position: absolute;
                display: block;
                bottom: var(--space-xs-negative);
                left: 0;
                width: 100%;
                height: 1px;
                background: var(--color-border);
            }
        }

        &.separator-after {
            margin-top: var(--space-sm);
        }
    }

    & a,
    & .link {
        color: inherit;
        text-decoration: none;
        font-weight: 500;
    }

    & .icon {
        margin-right: var(--space-xs);
        width: 12px;
        height: 12px;
    }
}

/* ════════════════════════════════════
   Scrollbar
════════════════════════════════════ */

.scrollbar {
    -webkit-overflow-scrolling: touch;
    scrollbar-color: var(--scrollbar-neutral-hovered) var(--scrollbar-neutral);
    scrollbar-width: thin;
}

/* ════════════════════════════════════
   Legacy helpers
════════════════════════════════════ */

.box-shadow {
    box-shadow: var(--shadow-sm);
}