/*
 * Unitax Design System: camada unica de tokens semanticos (--ux-*).
 *
 * Carregada em todos os layouts claros (usuario, admin, acesso classico,
 * checkout), depois das folhas legadas e antes de a11y.css. As folhas antigas
 * usam 4 vocabularios (--front-palette-*, --cui-*, --main-color, --gold...);
 * esta camada da um nome de uso para cada decisao e normaliza os componentes
 * que tinham dezenas de variantes (163 classes de botao, 112 de card, badges
 * inline). Documentacao: DESIGN-SYSTEM.md na raiz do projeto.
 */

:root {
    /* Cor: marca e superficies */
    --ux-color-primary: var(--front-color-primary, var(--cui-primary, #0b57d0));
    --ux-color-primary-hover: var(--front-color-primary-dark, var(--ux-color-primary));
    --ux-surface: #ffffff;
    --ux-surface-sunken: #f5f7fb;
    --ux-border: #d9dee8;
    --ux-border-strong: #b8c0cf;

    /* Cor: texto (contraste minimo 5,2:1 em branco, #f5f7fb e fundos claros de status) */
    --ux-text: #111827;
    --ux-text-soft: #334155;
    --ux-text-muted: #596579;
    --ux-text-success: #137333;
    --ux-text-warning: #8a5300;
    --ux-text-danger: #b42318;
    --ux-text-info: #0b5cad;
    --ux-text-link: #1a56db;         /* 6,2:1 em branco */
    --ux-text-brand-strong: #3449d8; /* >= 5,8:1 nos fundos azulados do painel */

    /* Cor: fundos de status (com o texto correspondente acima) */
    --ux-bg-success: #e8f5ec;
    --ux-bg-warning: #fff4e0;
    --ux-bg-danger: #fdecea;
    --ux-bg-info: #e8f1fb;
    --ux-bg-neutral: #eef1f6;

    /* Forma */
    --ux-radius-sm: 6px;
    --ux-radius-md: 10px;
    --ux-radius-lg: 14px;
    --ux-radius-pill: 999px;

    /* Profundidade */
    --ux-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06), 0 1px 3px rgba(17, 24, 39, 0.08);
    --ux-shadow-md: 0 4px 12px rgba(17, 24, 39, 0.08);

    /* Espaco (base 4px) */
    --ux-space-1: 4px;
    --ux-space-2: 8px;
    --ux-space-3: 12px;
    --ux-space-4: 16px;
    --ux-space-5: 24px;
    --ux-space-6: 32px;

    /* Tipografia */
    --ux-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --ux-font-size-xs: 0.75rem;
    --ux-font-size-sm: 0.875rem;
    --ux-font-size-md: 1rem;
    --ux-font-weight-medium: 500;
    --ux-font-weight-semibold: 600;

    /* Controles */
    --ux-control-height: 40px;
    --ux-target-min: 24px;
    --ux-motion-fast: 150ms;
}

/* ------------------------------------------------------------------ */
/* Texto semantico: as utilitarias do Bootstrap/CoreUI ficavam abaixo  */
/* de 4,5:1 (warning 1,6:1, info 2,0:1, success do admin 3,5:1).       */
/* ------------------------------------------------------------------ */
.text-success { color: var(--ux-text-success) !important; }
.text-warning { color: var(--ux-text-warning) !important; }
.text-danger { color: var(--ux-text-danger) !important; }
.text-info { color: var(--ux-text-info) !important; }
:is(.text-muted, .text-secondary, .text-body-secondary) { color: var(--ux-text-muted) !important; }
.premium-header .ph-breadcrumb { color: var(--ux-text-muted); }

/* ------------------------------------------------------------------ */
/* Botoes: uma so forma para todas as familias                          */
/* ------------------------------------------------------------------ */
:is(
    .btn, .theme-btn, .site-btn, .submit-btn, .action-btn, .fb-btn, .vc-btn, .p2p-btn,
    .ms-btn, .gc-btn, .pm-btn, .cla-btn, .bonus-btn, .primary-button
) {
    border-radius: var(--ux-radius-md);
    font-weight: var(--ux-font-weight-semibold);
    min-height: var(--ux-target-min);
    transition: background-color var(--ux-motion-fast) ease, border-color var(--ux-motion-fast) ease,
                color var(--ux-motion-fast) ease, box-shadow var(--ux-motion-fast) ease;
}

:is(
    .btn, .theme-btn, .site-btn, .submit-btn, .action-btn, .fb-btn, .vc-btn, .p2p-btn,
    .ms-btn, .gc-btn, .pm-btn, .cla-btn, .bonus-btn, .primary-button
):is(:disabled, .disabled, [aria-disabled="true"]) {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ------------------------------------------------------------------ */
/* Campos                                                              */
/* ------------------------------------------------------------------ */
:is(.form-control, .form-select):not(textarea):not([type="file"]):not(.form-control-sm):not(.form-select-sm) {
    min-height: var(--ux-control-height);
}
:is(.form-control, .form-select) {
    border-radius: var(--ux-radius-sm);
    border-color: var(--ux-border);
}
:is(.form-control, .form-select)::placeholder {
    color: var(--ux-text-muted);
    opacity: 1;
}
:is(.form-control, .form-select).is-invalid {
    border-color: var(--ux-text-danger);
}
.invalid-feedback {
    color: var(--ux-text-danger);
}

/* ------------------------------------------------------------------ */
/* Badges e status: mesma forma, cores semanticas com contraste AA      */
/* ------------------------------------------------------------------ */
:is(.badge, .status-pill, .role-badge, .method-badge, .settings-badge) {
    border-radius: var(--ux-radius-pill);
    font-size: var(--ux-font-size-xs);
    font-weight: var(--ux-font-weight-semibold);
    line-height: 1.4;
}
.badge:is(.bg-success, .badge-success, .text-bg-success) { background: var(--ux-bg-success) !important; color: var(--ux-text-success) !important; }
.badge:is(.bg-warning, .badge-warning, .text-bg-warning) { background: var(--ux-bg-warning) !important; color: var(--ux-text-warning) !important; }
.badge:is(.bg-danger, .badge-danger, .text-bg-danger) { background: var(--ux-bg-danger) !important; color: var(--ux-text-danger) !important; }
.badge:is(.bg-info, .badge-info, .text-bg-info) { background: var(--ux-bg-info) !important; color: var(--ux-text-info) !important; }
.badge:is(.bg-secondary, .badge-secondary, .bg-light) { background: var(--ux-bg-neutral) !important; color: var(--ux-text-soft) !important; }

/* ------------------------------------------------------------------ */
/* Cards e tabelas                                                     */
/* ------------------------------------------------------------------ */
.card {
    border-radius: var(--ux-radius-lg);
    border-color: var(--ux-border);
}
.table > thead th {
    font-weight: var(--ux-font-weight-semibold);
    color: var(--ux-text-soft);
}

/* ------------------------------------------------------------------ */
/* Alvos de toque minimos (WCAG 2.5.8): carrossel e icones de acao      */
/* ------------------------------------------------------------------ */
.owl-dots .owl-dot {
    min-width: var(--ux-target-min);
    min-height: var(--ux-target-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
:is(.owl-prev, .owl-next) {
    min-width: var(--ux-target-min);
    min-height: var(--ux-target-min);
}

/* ------------------------------------------------------------------ */
/* Contraste: pontos reprovados na auditoria axe de 2026-11-06         */
/* ------------------------------------------------------------------ */
:is(.ph-brand__tag, .ud-hero__eyebrow, .ud-hero__subtitle, .ud-trx-item__secondary) { color: var(--ux-text-muted) !important; }
.sidebar-wallet-card__actions :is(a, button, .sidebar-wallet-card__action) { color: var(--ux-text-link); }
:is(.ud-transactions__summary, .ud-trx-chip--type) { color: var(--ux-text-brand-strong) !important; }
.admin-users-person__copy :is([class*="role"], [class*="chip"], [class*="badge"], [class*="tag"]) { filter: none; }
.admin-users-person__copy [style*="#16a34a"], .admin-users-person__copy .text-success { color: var(--ux-text-success) !important; }
.btn-outline-primary {
    --bs-btn-color: #0b5ed7;
    --bs-btn-border-color: #0b5ed7;
    color: #0b5ed7;
    border-color: #0b5ed7;
}
.btn-outline-primary:is(:hover, :focus-visible, .active) { color: #ffffff; }
.ud-trx-item__meta, .ud-trx-item__meta > * { color: var(--ux-text-muted) !important; }
.admin-user-role-badge--user { color: var(--ux-text-brand-strong) !important; }
.admin-user-role-badge--merchant { color: var(--ux-text-success) !important; }
.admin-user-role-badge--agent { color: var(--ux-text-warning) !important; }