@layer reset {
    * {
        margin: 0;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        text-wrap: balance;
    }

    p,
    figcaption {
        max-width: 65ch;
        text-wrap: pretty;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    a {
        text-decoration: none;
    }
}

:root {
    block-size: 100svh;
    /* Font */
    --font-family: Inter, Helvetica, Arial, sans-serif;
    --font-size-0: clamp(1rem, 1rem + 0vw, 1rem);
    --font-size-1: clamp(1.067rem, 1.0421rem + 0.1105vw, 1.125rem);
    --font-size-2: clamp(1.1385rem, 1.084rem + 0.2422vw, 1.2656rem);
    --font-size-3: clamp(1.2148rem, 1.1252rem + 0.3982vw, 1.4238rem);
    --font-size-4: clamp(1.2962rem, 1.1652rem + 0.5822vw, 1.6018rem);
    --font-size-5: clamp(1.383rem, 1.2034rem + 0.7982vw, 1.802rem);
    /* Neutral */
    --clr-text: var(--DS-color-content-neutral-default-rest);
    --clr-text-subdued: var(--DS-color-content-neutral-subdued-rest);
    --clr-text-subdued-inverted: var(--DS-color-content-neutral-inverted-subdued-rest);
    --clr-text-static: var(--DS-color-content-neutral-static-rest);
    --clr-text-static-subdued: var(--DS-color-content-neutral-static-subdued-rest);
    --clr-body-bg: var(--DS-color-surface-neutral-default-rest);
    --clr-body-bg-subdued: var(--DS-color-surface-neutral-subdued-rest);
    --clr-body-bg-inverted: var(--DS-color-surface-neutral-default-inverted-rest);
    --clr-border: var(--DS-color-border-neutral-default-rest);
    --clr-border-inverted: var(--DS-color-border-neutral-inverted-rest);
    --clr-border-hovered: var(--DS-color-border-neutral-default-hovered);
    --clr-border-inverted-hovered: var(--DS-color-border-neutral-default-inverted-hovered);
    /* Primary */
    --clr-text-primary: var(--DS-color-content-primary-default-rest);
    --clr-bg-primary: var(--DS-color-surface-primary-default-rest);
    --clr-bg-primary-subdued: var(--DS-color-surface-primary-subdued-rest);
    --clr-border-primary: var(--DS-color-border-primary-default-rest);
    /* Secondary */
    --clr-text-secondary: var(--DS-color-content-secondary-default-rest);
    --clr-bg-secondary: var(--DS-color-surface-secondary-default-rest);
    --clr-border-secondary: var(--DS-color-border-secondary-default-rest);
    /* Info */
    --clr-text-info: var(--DS-color-content-info-default-rest);
    --clr-bg-info: var(--DS-color-surface-info-default-rest);
    --clr-bg-info-subdued: var(--DS-color-surface-info-subdued-rest);
    --clr-border-info: var(--DS-color-border-info-default-rest);
    /* Success */
    --clr-text-success: var(--DS-color-content-success-default-rest);
    --clr-bg-success: var(--DS-color-surface-success-default-rest);
    --clr-bg-success-subdued: var(--DS-color-surface-success-subdued-rest);
    --clr-bg-success-hovered: var(--DS-color-surface-success-default-hovered);
    --clr-border-success: var(--DS-color-border-success-default-rest);
    --clr-border-success-hovered: var(--DS-color-border-success-default-hovered);
    /* Warning */
    --clr-text-warning: var(--DS-color-content-warning-default-rest);
    --clr-bg-warning: var(--DS-color-surface-warning-default-rest);
    --clr-bg-warning-subdued: var(--DS-color-surface-warning-subdued-rest);
    --clr-border-warning: var(--DS-color-border-warning-default-rest);
    /* Danger */
    --clr-text-danger: var(--DS-color-content-danger-default-rest);
    --clr-bg-danger: var(--DS-color-surface-danger-default-rest);
    --clr-bg-danger-subdued: var(--DS-color-surface-danger-subdued-rest);
    --clr-border-danger: var(--DS-color-border-danger-default-rest);
    /* Shadows */
    --shadow-xs: var(--DS-box-shadow-shadow-1);
    --shadow-sm: var(--DS-box-shadow-shadow-2);
    --shadow-md: var(--DS-box-shadow-shadow-3);
    /* Borders */
    --border-radius: var(--DS-border-radius-40);
    /* Haven */
    --clr-havenBlue: #074092;
    --clr-havenGreen: #046d4d;
    --clr-divider-dark: #ddd;
    --clr-divider-light: #eee;
}

body {
    block-size: 100svh;
    font: 400 var(--font-size-0)/1.4rem var(--font-family);
    background-color: var(--clr-body-bg-subdued);
    color: var(--clr-text);
}

    body:has(> main:not(.account)) {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;

        @media(width > 768px) {
            grid-template-columns: 288px 1fr;
        }
    }

h1 {
    font-size: var(--font-size-5);

    &:has(+ p, + form) {
        margin-block-end: .5rem;
    }

    &:focus-visible {
        outline: none;
    }
}

h2 {
    font-size: var(--font-size-4);

    &:has(+ p) {
        margin-block-end: .5rem;
    }
}

h3 {
    font-size: var(--font-size-3);

    &:has(+ p) {
        margin-block-end: .25rem;
    }

    small {
        line-height: 1;
    }
}

h4 {
    font-size: var(--font-size-2);

    &:has(+ p) {
        margin-block-end: .25rem;
    }
}

h5 {
    font-size: var(--font-size-1);

    &:has(+ p) {
        margin-block-end: .15rem;
    }
}

h6 {
    font-size: var(--font-size-0);
}

p {
    font-size: var(--font-size-0);

    &:has(+ ol, + ul, + form) {
        margin-block-end: .5rem;
    }
}

small {
    font-size: calc(var(--font-size-0) * 0.875);

    &.text-tiny {
        font-size: smaller;
    }
}

.lh-1 {
    line-height: 1;
}

i {
    font-size: 1em;
}

.container {
    inline-size: 100%;
    max-inline-size: 1536px;
    padding-inline: 1rem;
    margin-inline: auto;
}

button {
    padding: .25rem .5rem;
    cursor: pointer;

    &.dxbl-btn:focus-visible {
        outline: none;
    }
}

label:not(dxbl-check label) {
    font-size: smaller;
    display: inline-block;
    margin-block-end: .15rem;
}

[class*="divider-"] {
    background-color: var(--clr-border);
}

.divider-v {
    block-size: 100%;
    inline-size: 1px;
}

.divider-h {
    block-size: 1px;
    inline-size: 100%;
}

.text-subdued {
    color: var(--clr-text-subdued);
}

[class*="alert"] {
    --alert-text: var(--clr-text);
    --alert-bg: var(--clr-body-bg);
    --alert-border: var(--clr-border);
    text-align: center;
    padding: .5rem;
    margin-block-end: .5rem;
    border: 1px solid;
    border-radius: var(--border-radius);
    color: var(--alert-text);
    background-color: var(--alert-bg);
    border-color: var(--alert-border);

    &[class*="-primary"] {
        --alert-text: var(--clr-text-primary);
        --alert-bg: var(--clr-bg-primary-subdued);
        --alert-border: var(--clr-border-primary);
    }

    &[class*="-secondary"] {
        --alert-text: var(--clr-text-secondary);
        --alert-bg: var(--clr-bg-secondary);
        --alert-border: var(--clr-border-secondary);
    }

    &[class*="-info"] {
        --alert-text: var(--clr-text-info);
        --alert-bg: var(--clr-bg-info-subdued);
        --alert-border: var(--clr-border-info);
    }

    &[class*="-success"] {
        --alert-text: var(--clr-text-success);
        --alert-bg: var(--clr-bg-success-subdued);
        --alert-border: var(--clr-border-success);
    }

    &[class*="-warning"] {
        --alert-text: var(--clr-text-warning);
        --alert-bg: var(--clr-bg-warning-subdued);
        --alert-border: var(--clr-border-warning);
    }

    &[class*="-danger"] {
        --alert-text: var(--clr-text-danger);
        --alert-bg: var(--clr-bg-danger-subdued);
        --alert-border: var(--clr-border-danger);
    }
}

/* Badges */
[class*="badge"] {
    --badge-padding-inline: 0.65em;
    --badge-padding-block: 0.35em;
    --badge-font-size: 0.662em;
    --badge-font-weight: 700;
    --badge-border-radius: var(--border-radius);
    --badge-text: var(--clr-text-static);
    --badge-bg: var(--clr-body-bg);
    --badge-border: var(--badge-bg);
    display: inline-block;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border: 1px solid;
    padding: var(--badge-padding-block) var(--badge-padding-inline);
    font-size: var(--badge-font-size);
    font-weight: var(--badge-font-weight);
    border-radius: var(--badge-border-radius);
    color: var(--badge-text);
    background-color: var(--badge-bg);
    border-color: var(--badge-border);

    &[class*="-primary"] {
        --badge-bg: var(--clr-bg-primary);

        &[class*="-outlined"] {
            --badge-text: var(--clr-text-primary);
            --badge-bg: var(--clr-bg-primary-subdued);
            --badge-border: var(--clr-border-primary);
        }
    }

    &[class*="-secondary"] {
        --badge-text: var(--clr-text-secondary);
        --badge-bg: var(--clr-bg-secondary);

        &[class*="-outlined"] {
            --badge-text: var(--clr-text-secondary);
            --badge-bg: var(--clr-bg-secondary);
            --badge-border: var(--clr-border-secondary);
        }
    }

    &[class*="-info"] {
        --badge-bg: var(--clr-bg-info);

        &[class*="-outlined"] {
            --badge-text: var(--clr-text-info);
            --badge-bg: var(--clr-bg-info-subdued);
            --badge-border: var(--clr-border-info);
        }
    }

    &[class*="-success"] {
        --badge-bg: var(--clr-bg-success);

        &[class*="-outlined"] {
            --badge-text: var(--clr-text-success);
            --badge-bg: var(--clr-bg-success-subdued);
            --badge-border: var(--clr-border-success);
        }
    }

    &[class*="-warning"] {
        --badge-bg: var(--clr-bg-warning);

        &[class*="-outlined"] {
            --badge-text: var(--clr-text-warning);
            --badge-bg: var(--clr-bg-warning-subdued);
            --badge-border: var(--clr-border-warning);
        }
    }

    &[class*="-danger"] {
        --badge-bg: var(--clr-bg-danger);

        &[class*="-outlined"] {
            --badge-text: var(--clr-text-danger);
            --badge-bg: var(--clr-bg-danger-subdued);
            --badge-border: var(--clr-border-danger);
        }
    }
}

.shadow-md {
    box-shadow: light-dark(var(--shadow-md), var(--shadow-md));
}

.dxbl-checkbox.dxbl-checkbox-switch:not(.dxbl-readonly):not(.dxbl-disabled).dxbl-checkbox-checked {
    &.success {
        --dxbl-checkbox-check-element-bg: var(--dxbl-checkbox-success-checked-check-element-bg);
        --dxbl-checkbox-check-element-border: var(--dxbl-checkbox-success-checked-check-element-border);
        --dxbl-checkbox-check-element-switch-trigger-bg: var(--dxbl-checkbox-success-checked-check-element-trigger-bg);
        --dxbl-checkbox-hover-check-element-border: var(--dxbl-checkbox-success-checked-hover-check-element-border);
        --dxbl-checkbox-hover-check-element-bg: var(--dxbl-checkbox-success-checked-hover-check-element-bg);
    }
}

.dxbl-checkbox.dxbl-checkbox-switch:not(.dxbl-readonly):not(.dxbl-disabled).dxbl-checkbox-unchecked {
    &.danger {
        --dxbl-checkbox-check-element-bg: var(--dxbl-checkbox-danger-checked-check-element-bg);
        --dxbl-checkbox-check-element-border: var(--dxbl-checkbox-danger-checked-check-element-border);
        --dxbl-checkbox-check-element-switch-trigger-bg: var(--dxbl-checkbox-danger-checked-check-element-trigger-bg);
        --dxbl-checkbox-hover-check-element-border: var(--dxbl-checkbox-danger-checked-hover-check-element-border);
        --dxbl-checkbox-hover-check-element-bg: var(--dxbl-checkbox-danger-checked-hover-check-element-bg);
        --dxbl-checkbox-hover-check-element-trigger-bg: var(--dxbl-checkbox-danger-checked-hover-check-element-trigger-bg);
    }
}

.validation-message {
    color: var(--clr-text-danger);
    font-size: smaller;
}

.dxbl-list-box-item-selected .text-subdued {
    color: oklch(from currentColor 92% c h);
}