/* ── @font-face (generated from CMS fontMap) ── */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("/fonts/font-main-light.woff2") format("woff2");
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/font-main-regular.woff2") format("woff2");
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/font-main-medium.woff2") format("woff2");
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/font-main-bold.woff2") format("woff2");
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("/fonts/font-main-black.woff2") format("woff2");
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/font-display-regular.woff2") format("woff2");
}

@theme static {
    /* ── Breakpoints (from CMS gridMap) ── */
    --breakpoint-*: initial;
    --breakpoint-xs: 30rem;    /* 480px */
    --breakpoint-sm: 40rem;    /* 640px */
    --breakpoint-md: 48rem;    /* 768px */
    --breakpoint-lg: 64rem;    /* 1024px */
    --breakpoint-xl: 80rem;    /* 1280px */
    --breakpoint-2xl: 85.25rem;    /* 1364px */
    --breakpoint-3xl: 95rem;    /* 1520px */
    --breakpoint-4xl: 101.25rem;    /* 1620px */
    --nav-break: 1024px;    /* config nav-break: large */
}

@theme static {
    /* ── Font families (from config.json5 fontMap) ── */
    --font-main: "Roboto", ui-sans-serif, system-ui, sans-serif;
    --default-font-family: var(--font-main);
    --font-display: "Roboto", ui-sans-serif, system-ui, sans-serif;

    /* ── Font weights — global scale, union across all fonts ── */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-weight-black: 900;

    /* ── Font weights — per font (font-main-bold, font-display-light, …) ── */
    --font-weight-main-light: 300;
    --font-weight-main-regular: 400;
    --font-weight-main-medium: 500;
    --font-weight-main-bold: 700;
    --font-weight-main-black: 900;
    --font-weight-display-regular: 400;
}

@theme {
    /* ── Typography — references CMS vars: --h1-size, --base-font-size, etc. ── */
    --text-h1: calc(var(--h1-size) / var(--base-font-size) * 1rem);    /* 40px */
    --text-h2: calc(var(--h2-size) / var(--base-font-size) * 1rem);    /* 36px */
    --text-h3: calc(var(--h3-size) / var(--base-font-size) * 1rem);    /* 32px */
    --text-h4: calc(var(--h4-size) / var(--base-font-size) * 1rem);    /* 28px */
    --text-h5: calc(var(--h5-size) / var(--base-font-size) * 1rem);    /* 24px */
    --text-h6: calc(var(--h6-size) / var(--base-font-size) * 1rem);    /* 20px */
    --text-base: 1rem;    /* base-font-size: 16px */
    --leading-normal: calc(var(--base-line-height) / var(--base-font-size) * 1rem);    /* 26px */

    /* ── Radius — component default var (rounded-* keep Tailwind defaults) ── */
    --base-border-radius-limited: calc(var(--base-border-radius) * 1px);

    /* ── Spacing — base gap + section-spacing min/max (from config) ── */
    --base-gap: calc(18 / var(--base-font-size) * 1rem);    /* 18px */
    --space-sm-min: calc(48 / var(--base-font-size) * 1rem);    /* 48px */
    --space-sm-max: calc(64 / var(--base-font-size) * 1rem);    /* 64px */
    --space-md-min: calc(64 / var(--base-font-size) * 1rem);    /* 64px */
    --space-md-max: calc(96 / var(--base-font-size) * 1rem);    /* 96px */
    --space-lg-min: calc(80 / var(--base-font-size) * 1rem);    /* 80px */
    --space-lg-max: calc(120 / var(--base-font-size) * 1rem);    /* 120px */
    --space-xl-min: calc(96 / var(--base-font-size) * 1rem);    /* 96px */
    --space-xl-max: calc(120 / var(--base-font-size) * 1rem);    /* 120px */

    /* ── Colors — references CMS vars: --color-{name}-h, -s, -l ── */

    /* Primary */
    --color-primary-50: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 1%), 97%);
    --color-primary-100: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 1%), 94%);
    --color-primary-200: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 1%), 86%);
    --color-primary-300: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 1%), 77%);
    --color-primary-400: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 1%), 66%);
    --color-primary-600: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 1%), 43%);
    --color-primary-700: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 1%), 35%);
    --color-primary-800: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 1%), 27%);
    --color-primary-900: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 1%), 20%);
    --color-primary-950: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 1%), 12%);
    --color-primary:     hsl(var(--color-primary-h), calc(var(--color-primary-s) * 1%), calc(var(--color-primary-l) * 1%));
    --color-primary-500: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 1%), calc(var(--color-primary-l) * 1%));
    --color-primary-foreground: hsl(var(--color-primary-text-h), calc(var(--color-primary-text-s) * 1%), calc(var(--color-primary-text-l) * 1%));

    /* Secondary */
    --color-secondary-50: hsl(var(--color-secondary-h), calc(var(--color-secondary-s) * 1%), 97%);
    --color-secondary-100: hsl(var(--color-secondary-h), calc(var(--color-secondary-s) * 1%), 94%);
    --color-secondary-200: hsl(var(--color-secondary-h), calc(var(--color-secondary-s) * 1%), 86%);
    --color-secondary-300: hsl(var(--color-secondary-h), calc(var(--color-secondary-s) * 1%), 77%);
    --color-secondary-400: hsl(var(--color-secondary-h), calc(var(--color-secondary-s) * 1%), 66%);
    --color-secondary-600: hsl(var(--color-secondary-h), calc(var(--color-secondary-s) * 1%), 43%);
    --color-secondary-700: hsl(var(--color-secondary-h), calc(var(--color-secondary-s) * 1%), 35%);
    --color-secondary-800: hsl(var(--color-secondary-h), calc(var(--color-secondary-s) * 1%), 27%);
    --color-secondary-900: hsl(var(--color-secondary-h), calc(var(--color-secondary-s) * 1%), 20%);
    --color-secondary-950: hsl(var(--color-secondary-h), calc(var(--color-secondary-s) * 1%), 12%);
    --color-secondary:     hsl(var(--color-secondary-h), calc(var(--color-secondary-s) * 1%), calc(var(--color-secondary-l) * 1%));
    --color-secondary-500: hsl(var(--color-secondary-h), calc(var(--color-secondary-s) * 1%), calc(var(--color-secondary-l) * 1%));
    --color-secondary-foreground: hsl(var(--color-secondary-text-h), calc(var(--color-secondary-text-s) * 1%), calc(var(--color-secondary-text-l) * 1%));

    /* Background */
    --color-background-50: hsl(var(--color-background-h), calc(var(--color-background-s) * 1%), 97%);
    --color-background-100: hsl(var(--color-background-h), calc(var(--color-background-s) * 1%), 94%);
    --color-background-200: hsl(var(--color-background-h), calc(var(--color-background-s) * 1%), 86%);
    --color-background-300: hsl(var(--color-background-h), calc(var(--color-background-s) * 1%), 77%);
    --color-background-400: hsl(var(--color-background-h), calc(var(--color-background-s) * 1%), 66%);
    --color-background-600: hsl(var(--color-background-h), calc(var(--color-background-s) * 1%), 43%);
    --color-background-700: hsl(var(--color-background-h), calc(var(--color-background-s) * 1%), 35%);
    --color-background-800: hsl(var(--color-background-h), calc(var(--color-background-s) * 1%), 27%);
    --color-background-900: hsl(var(--color-background-h), calc(var(--color-background-s) * 1%), 20%);
    --color-background-950: hsl(var(--color-background-h), calc(var(--color-background-s) * 1%), 12%);
    --color-background:     hsl(var(--color-background-h), calc(var(--color-background-s) * 1%), calc(var(--color-background-l) * 1%));
    --color-background-500: hsl(var(--color-background-h), calc(var(--color-background-s) * 1%), calc(var(--color-background-l) * 1%));
    --color-background-foreground: hsl(var(--color-background-text-h), calc(var(--color-background-text-s) * 1%), calc(var(--color-background-text-l) * 1%));

    /* Surface */
    --color-surface-50: hsl(var(--color-surface-h), calc(var(--color-surface-s) * 1%), 97%);
    --color-surface-100: hsl(var(--color-surface-h), calc(var(--color-surface-s) * 1%), 94%);
    --color-surface-200: hsl(var(--color-surface-h), calc(var(--color-surface-s) * 1%), 86%);
    --color-surface-300: hsl(var(--color-surface-h), calc(var(--color-surface-s) * 1%), 77%);
    --color-surface-400: hsl(var(--color-surface-h), calc(var(--color-surface-s) * 1%), 66%);
    --color-surface-600: hsl(var(--color-surface-h), calc(var(--color-surface-s) * 1%), 43%);
    --color-surface-700: hsl(var(--color-surface-h), calc(var(--color-surface-s) * 1%), 35%);
    --color-surface-800: hsl(var(--color-surface-h), calc(var(--color-surface-s) * 1%), 27%);
    --color-surface-900: hsl(var(--color-surface-h), calc(var(--color-surface-s) * 1%), 20%);
    --color-surface-950: hsl(var(--color-surface-h), calc(var(--color-surface-s) * 1%), 12%);
    --color-surface:     hsl(var(--color-surface-h), calc(var(--color-surface-s) * 1%), calc(var(--color-surface-l) * 1%));
    --color-surface-500: hsl(var(--color-surface-h), calc(var(--color-surface-s) * 1%), calc(var(--color-surface-l) * 1%));
    --color-surface-foreground: hsl(var(--color-surface-text-h), calc(var(--color-surface-text-s) * 1%), calc(var(--color-surface-text-l) * 1%));

    /* Surface-elevated */
    --color-surface-elevated-50: hsl(var(--color-surface-elevated-h), calc(var(--color-surface-elevated-s) * 1%), 97%);
    --color-surface-elevated-100: hsl(var(--color-surface-elevated-h), calc(var(--color-surface-elevated-s) * 1%), 94%);
    --color-surface-elevated-200: hsl(var(--color-surface-elevated-h), calc(var(--color-surface-elevated-s) * 1%), 86%);
    --color-surface-elevated-300: hsl(var(--color-surface-elevated-h), calc(var(--color-surface-elevated-s) * 1%), 77%);
    --color-surface-elevated-400: hsl(var(--color-surface-elevated-h), calc(var(--color-surface-elevated-s) * 1%), 66%);
    --color-surface-elevated-600: hsl(var(--color-surface-elevated-h), calc(var(--color-surface-elevated-s) * 1%), 43%);
    --color-surface-elevated-700: hsl(var(--color-surface-elevated-h), calc(var(--color-surface-elevated-s) * 1%), 35%);
    --color-surface-elevated-800: hsl(var(--color-surface-elevated-h), calc(var(--color-surface-elevated-s) * 1%), 27%);
    --color-surface-elevated-900: hsl(var(--color-surface-elevated-h), calc(var(--color-surface-elevated-s) * 1%), 20%);
    --color-surface-elevated-950: hsl(var(--color-surface-elevated-h), calc(var(--color-surface-elevated-s) * 1%), 12%);
    --color-surface-elevated:     hsl(var(--color-surface-elevated-h), calc(var(--color-surface-elevated-s) * 1%), calc(var(--color-surface-elevated-l) * 1%));
    --color-surface-elevated-500: hsl(var(--color-surface-elevated-h), calc(var(--color-surface-elevated-s) * 1%), calc(var(--color-surface-elevated-l) * 1%));
    --color-surface-elevated-foreground: hsl(var(--color-surface-elevated-text-h), calc(var(--color-surface-elevated-text-s) * 1%), calc(var(--color-surface-elevated-text-l) * 1%));

    /* Warning */
    --color-warning-50: hsl(var(--color-warning-h), calc(var(--color-warning-s) * 1%), 97%);
    --color-warning-100: hsl(var(--color-warning-h), calc(var(--color-warning-s) * 1%), 94%);
    --color-warning-200: hsl(var(--color-warning-h), calc(var(--color-warning-s) * 1%), 86%);
    --color-warning-300: hsl(var(--color-warning-h), calc(var(--color-warning-s) * 1%), 77%);
    --color-warning-400: hsl(var(--color-warning-h), calc(var(--color-warning-s) * 1%), 66%);
    --color-warning-600: hsl(var(--color-warning-h), calc(var(--color-warning-s) * 1%), 43%);
    --color-warning-700: hsl(var(--color-warning-h), calc(var(--color-warning-s) * 1%), 35%);
    --color-warning-800: hsl(var(--color-warning-h), calc(var(--color-warning-s) * 1%), 27%);
    --color-warning-900: hsl(var(--color-warning-h), calc(var(--color-warning-s) * 1%), 20%);
    --color-warning-950: hsl(var(--color-warning-h), calc(var(--color-warning-s) * 1%), 12%);
    --color-warning:     hsl(var(--color-warning-h), calc(var(--color-warning-s) * 1%), calc(var(--color-warning-l) * 1%));
    --color-warning-500: hsl(var(--color-warning-h), calc(var(--color-warning-s) * 1%), calc(var(--color-warning-l) * 1%));
    --color-warning-foreground: hsl(var(--color-warning-text-h), calc(var(--color-warning-text-s) * 1%), calc(var(--color-warning-text-l) * 1%));

    /* Border */
    --color-border-50: hsl(var(--color-border-h), calc(var(--color-border-s) * 1%), 97%);
    --color-border-100: hsl(var(--color-border-h), calc(var(--color-border-s) * 1%), 94%);
    --color-border-200: hsl(var(--color-border-h), calc(var(--color-border-s) * 1%), 86%);
    --color-border-300: hsl(var(--color-border-h), calc(var(--color-border-s) * 1%), 77%);
    --color-border-400: hsl(var(--color-border-h), calc(var(--color-border-s) * 1%), 66%);
    --color-border-600: hsl(var(--color-border-h), calc(var(--color-border-s) * 1%), 43%);
    --color-border-700: hsl(var(--color-border-h), calc(var(--color-border-s) * 1%), 35%);
    --color-border-800: hsl(var(--color-border-h), calc(var(--color-border-s) * 1%), 27%);
    --color-border-900: hsl(var(--color-border-h), calc(var(--color-border-s) * 1%), 20%);
    --color-border-950: hsl(var(--color-border-h), calc(var(--color-border-s) * 1%), 12%);
    --color-border:     hsl(var(--color-border-h), calc(var(--color-border-s) * 1%), calc(var(--color-border-l) * 1%));
    --color-border-500: hsl(var(--color-border-h), calc(var(--color-border-s) * 1%), calc(var(--color-border-l) * 1%));
    --color-border-foreground: hsl(var(--color-border-text-h), calc(var(--color-border-text-s) * 1%), calc(var(--color-border-text-l) * 1%));

    /* Foreground — alias for background's text color */
    --color-foreground: hsl(var(--color-background-text-h), calc(var(--color-background-text-s) * 1%), calc(var(--color-background-text-l) * 1%));

    /* ── Container & grid ── */
    --container-max: 101.25rem;    /* 1620px */
    --column-count: 12;

    /* ── Shadows — uses foreground color so shadows adapt to the theme ── */
    --shadow-sm: 0 1px 3px 0 color-mix(in srgb, hsl(var(--color-background-text-h), calc(var(--color-background-text-s) * 1%), calc(var(--color-background-text-l) * 1%)) 8%, transparent);
    --shadow-md: 0px 20px 25px -5px rgba(0,0,0,0.1), 0px 8px 10px -6px rgba(0,0,0,0.1);
    --shadow-lg: 0 20px 40px -8px color-mix(in srgb, hsl(var(--color-background-text-h), calc(var(--color-background-text-s) * 1%), calc(var(--color-background-text-l) * 1%)) 18%, transparent), 0 8px 16px -4px color-mix(in srgb, hsl(var(--color-background-text-h), calc(var(--color-background-text-s) * 1%), calc(var(--color-background-text-l) * 1%)) 10%, transparent);
}


@custom-variant nav-bar (@media (width >= theme(--nav-break)));

@custom-variant nav-drawer (@media (width < theme(--nav-break)));

@utility cols-* {
    flex-basis: calc(100% / var(--column-count) * --value(integer));
    max-width: calc(var(--cols-basis) / var(--column-count) * --value(integer));

    .le-indicators-enabled & {
        flex-basis: calc(100% / var(--column-count) * --value(integer) - calc(var(--base-gap) * 1.25));
        max-width: calc(var(--cols-basis) / var(--column-count) * --value(integer) - calc(var(--base-gap) * 1.25));
    }
}

@utility cols-suffix-* {
    margin-inline-end: calc(var(--cols-basis) / var(--column-count) * --value(integer));
}

@utility cols-prefix-* {
    margin-inline-start: calc(var(--cols-basis) / var(--column-count) * --value(integer));
}

@utility cols-auto {
    max-width: 100%;
    flex-basis: 0;
}

@utility btn {
    --btn-background: var(--color-primary);
    --btn-foreground: var(--color-primary-foreground);
    --btn-size: 4;

    display: inline-flex; 
    align-items: center;
    column-gap: 0.6ch; 
    background-color: var(--btn-background);
    color: var(--btn-foreground);
    padding-block: calc(calc(var(--spacing) * var(--btn-size)) * 0.8);
    padding-inline: calc(calc(var(--spacing) * var(--btn-size)) * 1);
    text-decoration: none; 
    cursor: pointer;
    border-radius: var(--base-border-radius-limited);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 350ms;

    &:hover, &:focus-visible, &:active, &.active {
        background-color: var(--btn-foreground);
        color: var(--btn-background);
    }

    &[class*="before:icon-"]::before, 
    &[class*="after:icon-"]::after, 
    [class*="icon-"] {
        color: inherit;
    } 

    &.btn-outline {
        background-color: transparent;
        color: var(--btn-background);
        outline: 2px solid var(--btn-background);
        outline-offset: -2px;

        &:hover, &:focus-visible, &:active, &.active {
            background-color: var(--btn-background);
            color: var(--btn-foreground);
        }
    }
}

@utility btn-* {
    --btn-background: --value(--color-*);
    --btn-foreground: --value(--color-*-foreground);
}

@utility btn-size-* {
    --btn-size: --value(integer);
}

@utility theme-color-* {
    background-color: --value(--color-*); 
    color: --value(--color-*-foreground);
}

@utility theme-invert-color-* {
    background-color: --value(--color-*-foreground); 
    color: --value(--color-*);
}

@utility focus-outline {
    outline: 3px double white !important;
    outline-offset: -2px !important; 
    background-color: white;
    color: black; 
    @apply ring-inset ring-2 ring-black;
}

@utility fluid-* {
    /* 1rem in px, keeps the constant term zoom-proof */
    --fluid-rem: tan(atan2(1rem, 1px));

    /* target value (max) */
    --fluid-to: --value(--text-*, --spacing-*, [length], [percentage], [*]);
    --fluid-to-n: tan(atan2(var(--fluid-to), 1px));

    /* start value (min): modifier > --fluid-from > --fluid-floor > proportional */
    --fluid-mod: --modifier(--text-*, --spacing-*, [length], [percentage], [*]);
    --fluid-from-l: var(--fluid-mod,
        var(--fluid-from,
        var(--fluid-floor, calc(var(--fluid-to) * var(--fluid-factor, 0.4)))
        )
    );
    --fluid-from-n: tan(atan2(var(--fluid-from-l), 1px));

    /* breakpoints from theme */
    --fluid-bp-min: tan(atan2(var(--fluid-min-bp, var(--breakpoint-xs, 480px)), 1px));
    --fluid-bp-max: tan(atan2(var(--fluid-max-bp, var(--breakpoint-4xl, 1620px)), 1px));

    /* line through (bp-min, from) and (bp-max, to) */
    --fluid-slope: calc(
        (var(--fluid-to-n) - var(--fluid-from-n)) /
        (var(--fluid-bp-max) - var(--fluid-bp-min))
    );
    --fluid-intercept: calc(var(--fluid-from-n) - var(--fluid-bp-min) * var(--fluid-slope));

    --fluid-value: clamp(
        var(--fluid-from-l),
        calc(var(--fluid-intercept) / var(--fluid-rem) * 1rem + var(--fluid-slope) * 100vw),
        var(--fluid-to)
    );
}

@utility fluid-text {
    --fluid-ratio: calc(tan(atan2(var(--text-base), 1px)) / var(--fluid-to-n));
    --fluid-floor: calc(var(--text-base) * (var(--fluid-lift, 2) - var(--fluid-ratio)));
    font-size: var(--fluid-value);
    line-height: min(1.1em, calc(100% + 10px));
}

@utility popover {
    position: relative;

    body:not(.cms-liveeditor-is-opened) & {
        display: inline-block;
    }

    & > :first-child {
        cursor: pointer;
    }

    & > :nth-child(2) {
        font-size: calc(var(--text-base) - 0.125rem);
        border-radius: var(--base-border-radius-limited);
        z-index: 60;
        background-color: var(--color-surface-elevated);
        color: var(--color-surface-elevated-foreground);
        padding: calc(var(--base-gap, 2rem) / 2) var(--base-gap, 2rem);
        transition-property: transform, opacity;
        transition-timing-function: ease-in-out;
        transition-duration: 300ms;

        body:not(.cms-liveeditor-is-opened) & {
            position: absolute;
            top: 100%;
            left: 0;
            width: max-content;
            max-width: 15.625rem;
            overflow: hidden;
            visibility: hidden;
            opacity: 0;
            transform: translateY(0.5rem);
            pointer-events: none;
        }

        & > :last-child {
            margin-bottom: 0;
        }
    }

    /* high-contrast mode: outline the panel so it stays distinguishable */
    .contrast-intensify & > :nth-child(2) {
        border: 1px solid var(--color-surface-elevated-foreground);
    }

    /* reveal on hover / keyboard focus (frontend only) */
    body:not(.cms-liveeditor-is-opened) &:is(:hover, :focus-within) > :nth-child(2) {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        pointer-events: all;
    }
}

@custom-variant hover (&:is(:hover, :focus-visible));