/**
 * Versaro Joias — Componentes fundamentais
 *
 * Componentes reutilizáveis e independentes de página:
 * - botões;
 * - etiquetas;
 * - títulos editoriais;
 * - campos de formulário;
 * - mensagens.
 *
 * Este arquivo depende de:
 * 1. tokens.css
 * 2. base.css
 */

/* =========================================================
   BOTÕES
   ========================================================= */

.vs-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--vs-space-3);

    min-height: 3rem;
    padding:
        0.75rem
        1.5rem;

    border:
        var(--vs-border-width)
        solid
        transparent;

    border-radius: var(--vs-radius-sm);

    font-family: var(--vs-font-body);
    font-size: var(--vs-font-size-sm);
    font-weight: var(--vs-font-weight-semibold);
    line-height: var(--vs-line-height-ui);
    letter-spacing: var(--vs-letter-spacing-wide);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        var(--vs-transition-color),
        var(--vs-transition-transform),
        var(--vs-transition-opacity);
}

.vs-button:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.vs-button:active {
    transform: translateY(0);
}

.vs-button:disabled,
.vs-button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.48;
    pointer-events: none;
    transform: none;
}

/* Botão principal */

.vs-button--primary {
    background-color: var(--vs-color-primary);
    color: var(--vs-color-text-inverse);
}

.vs-button--primary:hover {
    background-color: var(--vs-color-primary-hover);
    color: var(--vs-color-text-inverse);
}

.vs-button--primary:active {
    background-color: var(--vs-color-primary-active);
}

/* Botão secundário */

.vs-button--secondary {
    border-color: var(--vs-color-carbono);

    background-color: transparent;
    color: var(--vs-color-carbono);
}

.vs-button--secondary:hover {
    border-color: var(--vs-color-primary);

    background-color: var(--vs-color-primary);
    color: var(--vs-color-text-inverse);
}

/* Botão claro para fundos escuros */

.vs-button--light {
    border-color: var(--vs-color-diamante);

    background-color: var(--vs-color-diamante);
    color: var(--vs-color-carbono);
}

.vs-button--light:hover {
    border-color: var(--vs-color-perola);

    background-color: var(--vs-color-perola);
    color: var(--vs-color-carbono);
}

/* Botão transparente para fundos escuros */

.vs-button--outline-light {
    border-color: rgba(237, 235, 230, 0.72);

    background-color: transparent;
    color: var(--vs-color-diamante);
}

.vs-button--outline-light:hover {
    border-color: var(--vs-color-diamante);

    background-color: var(--vs-color-diamante);
    color: var(--vs-color-carbono);
}

/* Botão textual */

.vs-button--text {
    min-height: auto;
    padding: 0;

    border: 0;
    border-radius: 0;

    background-color: transparent;
    color: var(--vs-color-link);

    letter-spacing: var(--vs-letter-spacing-wide);
}

.vs-button--text::after {
    content: "→";

    transition: var(--vs-transition-transform);
}

.vs-button--text:hover {
    color: var(--vs-color-link-hover);
    transform: none;
}

.vs-button--text:hover::after {
    transform: translateX(0.25rem);
}

/* Tamanhos */

.vs-button--small {
    min-height: 2.5rem;
    padding:
        0.625rem
        1rem;

    font-size: var(--vs-font-size-xs);
}

.vs-button--large {
    min-height: 3.5rem;
    padding:
        1rem
        2rem;

    font-size: var(--vs-font-size-base);
}

.vs-button--full {
    width: 100%;
}

/* Ícones dentro dos botões */

.vs-button__icon {
    width: 1.1em;
    height: 1.1em;
}

/* =========================================================
   ETIQUETAS E MARCADORES
   ========================================================= */

.vs-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 1.75rem;
    padding:
        0.25rem
        0.625rem;

    border:
        var(--vs-border-width)
        solid
        var(--vs-color-border);

    border-radius: var(--vs-radius-xs);

    background-color: var(--vs-color-surface-muted);
    color: var(--vs-color-carbono);

    font-size: var(--vs-font-size-xs);
    font-weight: var(--vs-font-weight-semibold);
    line-height: var(--vs-line-height-ui);
    letter-spacing: var(--vs-letter-spacing-wide);
    text-transform: uppercase;
}

.vs-badge--brand {
    border-color: var(--vs-color-primary);

    background-color: var(--vs-color-primary);
    color: var(--vs-color-text-inverse);
}

.vs-badge--dark {
    border-color: var(--vs-color-carbono);

    background-color: var(--vs-color-carbono);
    color: var(--vs-color-diamante);
}

.vs-badge--outline {
    border-color: var(--vs-color-border-strong);

    background-color: transparent;
    color: var(--vs-color-text);
}

/* =========================================================
   TÍTULOS EDITORIAIS
   ========================================================= */

.vs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--vs-space-3);

    margin: 0;

    color: var(--vs-color-primary);

    font-size: var(--vs-font-size-xs);
    font-weight: var(--vs-font-weight-semibold);
    line-height: var(--vs-line-height-ui);
    letter-spacing: var(--vs-letter-spacing-uppercase);
    text-transform: uppercase;
}

.vs-eyebrow::before {
    content: "";

    width: 2rem;
    height: 1px;

    background-color: currentColor;
}

.vs-heading-group {
    display: grid;
    gap: var(--vs-space-4);

    width: 100%;
    max-width: var(--vs-container-narrow);
}

.vs-heading-group--center {
    margin-inline: auto;
    text-align: center;
}

.vs-heading-group--center .vs-eyebrow {
    justify-self: center;
}

.vs-heading-group--center .vs-eyebrow::after {
    content: "";

    width: 2rem;
    height: 1px;

    background-color: currentColor;
}

.vs-heading-group__title {
    margin: 0;
}

.vs-heading-group__description {
    max-width: var(--vs-text-measure);
    margin: 0;

    color: var(--vs-color-text-muted);
    font-size: var(--vs-font-size-lg);
}

.vs-heading-group--center .vs-heading-group__description {
    margin-inline: auto;
}

/* Título de destaque editorial */

.vs-display-title {
    margin: 0;

    font-family: var(--vs-font-display);
    font-size: var(--vs-font-size-display);
    font-weight: var(--vs-font-weight-regular);
    line-height: var(--vs-line-height-tight);
    letter-spacing: var(--vs-letter-spacing-tight);
}

/* Palavra ou assinatura de apoio */

.vs-signature {
    color: var(--vs-color-primary);

    font-family: var(--vs-font-signature);
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: var(--vs-font-weight-regular);
    line-height: 1;
}

/* =========================================================
   CAMPOS DE FORMULÁRIO
   ========================================================= */

.vs-field {
    display: grid;
    gap: var(--vs-space-2);

    width: 100%;
}

.vs-field__label {
    color: var(--vs-color-text);

    font-size: var(--vs-font-size-sm);
    font-weight: var(--vs-font-weight-semibold);
    line-height: var(--vs-line-height-ui);
}

.vs-field__required {
    color: var(--vs-color-error);
}

.vs-field__control {
    width: 100%;
    min-height: 3rem;
    padding:
        0.75rem
        1rem;

    border:
        var(--vs-border-width)
        solid
        var(--vs-color-border-strong);

    border-radius: var(--vs-radius-sm);

    background-color: var(--vs-color-surface);
    color: var(--vs-color-text);

    font-size: var(--vs-font-size-base);
    line-height: var(--vs-line-height-ui);

    transition:
        var(--vs-transition-color),
        box-shadow var(--vs-duration-fast) var(--vs-ease-standard);
}

.vs-field__control:hover {
    border-color: var(--vs-color-carbono);
}

.vs-field__control:focus {
    border-color: var(--vs-color-primary);
    outline: none;

    box-shadow:
        0 0 0 3px
        var(--vs-color-focus);
}

textarea.vs-field__control {
    min-height: 8rem;
    line-height: var(--vs-line-height-body);
}

select.vs-field__control {
    cursor: pointer;
}

.vs-field__description,
.vs-field__message {
    margin: 0;

    color: var(--vs-color-text-muted);
    font-size: var(--vs-font-size-sm);
    line-height: 1.5;
}

.vs-field__message--error {
    color: var(--vs-color-error);
}

.vs-field__control[aria-invalid="true"] {
    border-color: var(--vs-color-error);
}

.vs-field__control:disabled {
    border-color: var(--vs-color-border);

    background-color: var(--vs-color-surface-muted);
    color: var(--vs-color-text-soft);

    opacity: 0.72;
}

/* Agrupamento de campos */

.vs-form-grid {
    display: grid;
    gap: var(--vs-space-5);
}

.vs-form-grid--two-columns {
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
}

/* =========================================================
   CHECKBOX E RADIO PERSONALIZADOS
   ========================================================= */

.vs-choice {
    display: flex;
    align-items: flex-start;
    gap: var(--vs-space-3);

    cursor: pointer;
}

.vs-choice__input {
    width: 1.125rem;
    height: 1.125rem;
    margin-block-start: 0.2rem;

    accent-color: var(--vs-color-primary);
    flex: 0 0 auto;
}

.vs-choice__content {
    display: grid;
    gap: var(--vs-space-1);
}

.vs-choice__label {
    font-size: var(--vs-font-size-sm);
    font-weight: var(--vs-font-weight-medium);
    line-height: var(--vs-line-height-ui);
}

.vs-choice__description {
    color: var(--vs-color-text-muted);
    font-size: var(--vs-font-size-sm);
    line-height: 1.5;
}

/* =========================================================
   MENSAGENS
   ========================================================= */

.vs-notice {
    display: grid;
    gap: var(--vs-space-2);

    padding: var(--vs-space-4);

    border:
        var(--vs-border-width)
        solid
        var(--vs-color-border);

    border-inline-start-width: 3px;
    border-radius: var(--vs-radius-sm);

    background-color: var(--vs-color-surface-muted);
    color: var(--vs-color-text);
}

.vs-notice__title {
    margin: 0;

    font-family: var(--vs-font-body);
    font-size: var(--vs-font-size-sm);
    font-weight: var(--vs-font-weight-semibold);
    letter-spacing: normal;
}

.vs-notice__content {
    margin: 0;

    color: var(--vs-color-text-muted);
    font-size: var(--vs-font-size-sm);
}

.vs-notice--success {
    border-inline-start-color: var(--vs-color-success);
}

.vs-notice--warning {
    border-inline-start-color: var(--vs-color-warning);
}

.vs-notice--error {
    border-inline-start-color: var(--vs-color-error);
}

/* =========================================================
   DIVISOR EDITORIAL
   ========================================================= */

.vs-divider {
    display: flex;
    align-items: center;
    gap: var(--vs-space-4);

    width: 100%;

    color: var(--vs-color-primary);
}

.vs-divider::before,
.vs-divider::after {
    content: "";

    height: 1px;

    background-color: var(--vs-color-border);
    flex: 1;
}

.vs-divider__mark {
    width: 0.45rem;
    height: 0.45rem;

    background-color: currentColor;

    transform: rotate(45deg);
}

/* =========================================================
   RESPONSIVIDADE
   ========================================================= */

@media (max-width: 47.99rem) {
    .vs-button--large {
        min-height: 3.25rem;
        padding-inline: 1.5rem;
    }

    .vs-form-grid--two-columns {
        grid-template-columns: 1fr;
    }

    .vs-heading-group__description {
        font-size: var(--vs-font-size-base);
    }
}