/**
 * 2N9HT production design-system foundation.
 * Values come from design-system/tokens.production.css; this file owns only
 * shared behavior and compatibility aliases.
 */
:root {
    --font-main: var(--n9-font-family);
    --e-global-typography-primary-font-family: var(--n9-font-family);
    --e-global-typography-secondary-font-family: var(--n9-font-family);
    --e-global-typography-text-font-family: var(--n9-font-family);
    --e-global-typography-accent-font-family: var(--n9-font-family);
    --n9-layout-gutter-current: var(--n9-layout-gutter-desktop);
}

html,
body {
    font-family: var(--n9-font-family, "Onest", "Onest Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-synthesis: none;
}

.n9-shell {
    box-sizing: border-box;
    width: min(var(--n9-layout-container-max), calc(100% - (2 * var(--n9-layout-gutter-current))));
    max-width: var(--n9-layout-container-max);
    margin-inline: auto;
}

.n9-reading {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--n9-layout-reading-max);
}

.n9-button {
    --n9-button-bg-current: var(--n9-button-primary-bg);
    --n9-button-text-current: var(--n9-button-primary-text);
    --n9-button-border-current: transparent;
    --n9-button-hover-current: var(--n9-button-primary-hover);
    position: relative;
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    min-height: var(--n9-button-min-height);
    padding: 10px var(--n9-button-padding-inline);
    border: 1px solid var(--n9-button-border-current);
    border-radius: var(--n9-button-radius);
    background: var(--n9-button-bg-current);
    color: var(--n9-button-text-current);
    font-family: var(--n9-font-family);
    font-size: var(--n9-button-size);
    font-weight: var(--n9-button-weight);
    font-synthesis: none;
    line-height: var(--n9-button-line);
    text-align: center;
    text-decoration: none;
    box-shadow: var(--n9-button-shadow-rest);
    overflow: hidden;
}

.n9-button--secondary {
    --n9-button-bg-current: var(--n9-button-secondary-bg);
    --n9-button-text-current: var(--n9-button-secondary-text);
    --n9-button-border-current: var(--n9-button-secondary-border);
    --n9-button-hover-current: var(--n9-button-secondary-hover);
}

.n9-button--tertiary {
    --n9-button-bg-current: transparent;
    --n9-button-text-current: var(--n9-button-tertiary-text);
    --n9-button-border-current: transparent;
    --n9-button-hover-current: var(--n9-button-secondary-hover);
    box-shadow: none;
}

.n9-button--accent {
    --n9-button-bg-current: var(--n9-button-accent-bg);
    --n9-button-text-current: var(--n9-button-accent-text);
    --n9-button-hover-current: var(--n9-button-accent-bg);
}

.n9-button--accent::after {
    position: absolute;
    inset: -40% auto -40% -55%;
    width: 35%;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .42), transparent);
    pointer-events: none;
    transform: skewX(-18deg) translateX(0);
}

.n9-button > * {
    position: relative;
    z-index: 1;
}

.n9-button--danger {
    --n9-button-bg-current: var(--n9-button-danger-bg);
    --n9-button-text-current: #fff;
    --n9-button-hover-current: var(--n9-button-danger-hover);
}

.n9-button--compact {
    min-height: var(--n9-button-compact-height);
    padding-block: 6px;
}

.n9-button:focus-visible {
    outline: var(--n9-button-focus-width) solid var(--n9-color-focus);
    outline-offset: var(--n9-button-focus-offset);
}

.n9-button:disabled,
.n9-button[aria-disabled="true"] {
    background: var(--n9-button-disabled-bg);
    color: var(--n9-button-disabled-text);
    box-shadow: none;
    cursor: not-allowed;
}

.n9-elevation--subtle,
.n9-elevation--editorial,
.n9-elevation--feature {
    --n9-elevation-rest-current: var(--n9-elevation-subtle-rest);
    --n9-elevation-raised-current: var(--n9-elevation-subtle-raised);
    --n9-elevation-lift-current: var(--n9-elevation-subtle-lift);
    box-shadow: var(--n9-elevation-rest-current);
}

.n9-elevation--editorial {
    --n9-elevation-rest-current: var(--n9-elevation-editorial-rest);
    --n9-elevation-raised-current: var(--n9-elevation-editorial-raised);
    --n9-elevation-lift-current: var(--n9-elevation-editorial-lift);
}

.n9-elevation--feature {
    --n9-elevation-rest-current: var(--n9-elevation-feature-rest);
    --n9-elevation-raised-current: var(--n9-elevation-feature-raised);
    --n9-elevation-lift-current: var(--n9-elevation-feature-lift);
}

.n9-elevation--subtle:focus-visible,
.n9-elevation--editorial:focus-visible,
.n9-elevation--feature:focus-visible {
    outline: 2px solid var(--n9-color-focus);
    outline-offset: 3px;
    box-shadow: var(--n9-elevation-raised-current);
}

@media (hover: hover) and (pointer: fine) {
    .n9-button:not(:disabled):not([aria-disabled="true"]):hover {
        background: var(--n9-button-hover-current);
        box-shadow: var(--n9-button-shadow-raised);
    }

    .n9-elevation--subtle:hover,
    .n9-elevation--editorial:hover,
    .n9-elevation--feature:hover {
        box-shadow: var(--n9-elevation-raised-current);
    }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .n9-button,
    .n9-elevation--subtle,
    .n9-elevation--editorial,
    .n9-elevation--feature {
        transition: background-color var(--n9-button-duration) ease,
            color var(--n9-button-duration) ease,
            border-color var(--n9-button-duration) ease,
            box-shadow var(--n9-motion-card-duration) var(--n9-motion-card-easing),
            transform var(--n9-motion-card-duration) var(--n9-motion-card-easing);
    }

    .n9-button--secondary:not(:disabled):not([aria-disabled="true"]):hover,
    .n9-button--accent:not(:disabled):not([aria-disabled="true"]):hover {
        transform: translateY(var(--n9-button-lift));
    }

    .n9-button--accent::after {
        transition: transform var(--n9-button-sheen-duration) ease;
    }

    .n9-button--accent:not(:disabled):not([aria-disabled="true"]):hover::after {
        transform: skewX(-18deg) translateX(500%);
    }

    .n9-elevation--subtle:hover,
    .n9-elevation--editorial:hover,
    .n9-elevation--feature:hover {
        transform: translateY(var(--n9-elevation-lift-current));
    }
}

@media (pointer: coarse) {
    .n9-button--compact {
        min-height: 44px;
    }
}

@media (max-width: 767px) {
    :root {
        --n9-layout-gutter-current: var(--n9-layout-gutter-mobile);
    }
}

@media (max-width: 359px) {
    :root {
        --n9-layout-gutter-current: var(--n9-layout-gutter-narrow);
    }
}

@media (prefers-reduced-motion: reduce) {
    .n9-button,
    .n9-elevation--subtle,
    .n9-elevation--editorial,
    .n9-elevation--feature {
        transition: none;
        transform: none;
    }
}

@media (forced-colors: active) {
    .n9-button,
    .n9-elevation--subtle,
    .n9-elevation--editorial,
    .n9-elevation--feature {
        border: 1px solid ButtonText;
        box-shadow: none;
    }
}