.button,
.header-cta,
.icon-text-button {
    border: 1px solid transparent;
    border-radius: 9999px;
    transition:
        border-color var(--transition),
        background-color var(--transition),
        color var(--transition),
        box-shadow var(--transition);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--size-control-height);
    padding: var(--size-control-padding-y) var(--size-control-padding-x);
    font-size: var(--type-ui-size);
    font-weight: var(--type-ui-weight);
    letter-spacing: -0.015em;
}

.button--primary,
.header-cta {
    background: var(--accent);
    color: var(--accent-contrast);
}

.button--secondary {
    background: var(--bg);
    color: var(--text);
    border-color: var(--line);
}

.button--ghost {
    background: transparent;
    color: var(--text);
    border-color: transparent;
}

.header-cta {
    min-height: var(--size-header-cta-height);
    padding: var(--size-header-cta-padding-y) var(--size-header-cta-padding-x);
    font-size: var(--type-ui-size);
    font-weight: var(--type-ui-weight);
}

.top-nav {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.top-nav__item {
    padding: var(--size-nav-padding-y) var(--size-nav-padding-x);
    border-radius: 0.875rem;
    color: var(--text);
    font-size: var(--type-nav-size);
    font-weight: var(--type-nav-weight);
    letter-spacing: -0.01em;
    transition:
        background-color var(--transition),
        color var(--transition);
}

.top-nav__item:hover,
.top-nav__item:focus-visible,
.top-nav__item.is-active {
    background: var(--bg-soft);
}

.icon-button {
    width: var(--size-icon-button);
    height: var(--size-icon-button);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--text);
}

.theme-toggle {
    width: auto;
    height: auto;
    min-height: var(--size-control-height);
    padding: 0 var(--size-control-padding-x);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid var(--line);
    border-radius: 9999px;
    background: var(--bg);
    color: var(--text);
}

.theme-toggle svg {
    width: var(--size-icon);
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--text-soft);
}

.theme-toggle__label {
    font-size: var(--type-ui-size);
    font-weight: var(--type-ui-weight);
}

.segmented-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.125rem;
    padding: var(--size-tabs-shell-padding);
    background: var(--bg-soft);
    border-radius: 0.75rem;
}

.segmented-tabs__button {
    padding: var(--size-tab-padding-y) var(--size-tab-padding-x);
    border: 0;
    border-radius: 0.625rem;
    background: transparent;
    color: var(--text-muted);
    font-size: var(--type-ui-size);
    font-weight: var(--type-ui-weight);
    transition:
        background-color var(--transition),
        color var(--transition),
        box-shadow var(--transition);
}

.segmented-tabs__button.is-active {
    background: var(--bg);
    color: var(--text);
    box-shadow: var(--hairline-shadow);
}

.size-switcher__button {
    min-width: 2.05rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.surface-card {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: none;
    padding: var(--size-card-padding-y) var(--size-card-padding-x);
}

.surface-card--soft {
    background: var(--bg-strong);
}

.eyebrow {
    margin-bottom: 0.85rem;
    font-size: var(--type-label-size);
    font-weight: var(--type-label-weight);
    color: var(--text);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.summary-text {
    color: var(--text-muted);
    font-size: var(--type-summary-size);
    line-height: var(--type-summary-line);
}

.button:hover,
.header-cta:hover,
.icon-text-button:hover,
.theme-toggle:hover,
.icon-button:hover {
    border-color: var(--line-strong);
    box-shadow: 0 0 0 1px var(--accent-soft);
}

@media (max-width: 960px) {
    .top-nav {
        flex-wrap: wrap;
    }
}