/**
 * senderzz-tokens.css — Design Token Sheet Canônico
 * Versão: 1.0.0
 *
 * FONTE DA VERDADE para todas as variáveis visuais do Senderzz.
 * Carregar ANTES de qualquer outro CSS do plugin:
 *   wp_enqueue_style( 'senderzz-tokens', plugin_url . '/assets/css/senderzz-tokens.css', [], '1.0.0' );
 *
 * Todos os outros arquivos devem referenciar var(--sz-*) em vez de valores hardcoded.
 */

/* ─────────────────────────────────────────────────────────
   1. BRAND — cores canônicas da identidade Senderzz
   ───────────────────────────────────────────────────────── */
:root {
    /* Laranja primário — único valor autorizado para ações e destaques */
    --sz-brand:          #E8650A;
    --sz-brand-hover:    #D05808;
    --sz-brand-light:    #FFF3EA;    /* fundos, badges, hover suave */
    --sz-brand-muted:    rgba(232, 101, 10, 0.12);

    /* Gradiente da brand (checkout card preferida, avatar, hero) */
    --sz-brand-gradient: linear-gradient(135deg, #E8650A 0%, #F5920A 60%, #FFAD2B 100%);
    --sz-brand-end:      #FFAD2B;    /* stop final do gradiente */

    /* Sombra colorida da brand */
    --sz-brand-shadow:   0 3px 12px rgba(232, 101, 10, 0.35);
    --sz-brand-glow:     0 12px 30px rgba(232, 101, 10, 0.24);
}

/* ─────────────────────────────────────────────────────────
   2. SEMÂNTICA — estados funcionais
   ───────────────────────────────────────────────────────── */
:root {
    /* Sucesso / crédito */
    --sz-success:        #1d6f42;
    --sz-success-bg:     #d4edda;
    --sz-success-border: #c3e6cb;

    /* Erro / débito / perigo */
    --sz-danger:         #c0392b;
    --sz-danger-bg:      #fde8e8;
    --sz-danger-border:  #f5c6cb;
    --sz-danger-hover:   #991f17;

    /* Aviso */
    --sz-warning:        #856404;
    --sz-warning-bg:     #fff3cd;
    --sz-warning-border: #ffeeba;

    /* Info */
    --sz-info:           #1a56db;
    --sz-info-bg:        #e8f0fe;

    /* Admin / destaque neutro */
    --sz-admin-bg:       #e8f0fe;
    --sz-admin-color:    #1a56db;
}

/* ─────────────────────────────────────────────────────────
   3. NEUTROS — escala de cinza e fundos
   ───────────────────────────────────────────────────────── */
:root {
    --sz-white:          #ffffff;
    --sz-black:          #1a1a1a;

    /* Superfícies */
    --sz-bg:             #f4f5f7;    /* fundo da página/app */
    --sz-surface:        #ffffff;    /* cards, painéis */
    --sz-surface-alt:    #f9f9f7;    /* fundo alternativo suave */

    /* Bordas */
    --sz-border:         #e0e0e0;    /* borda padrão */
    --sz-border-light:   #eeeeee;    /* borda sutil */
    --sz-border-dark:    #dddddd;    /* borda com mais contraste */

    /* Texto */
    --sz-text-primary:   #1a1a1a;
    --sz-text-secondary: #555555;
    --sz-text-muted:     #888888;
    --sz-text-placeholder: #bbbbbb;

    /* Divisores e linhas de lista */
    --sz-divider:        #f0f0f0;
    --sz-divider-alt:    #f5f5f3;
}

/* ─────────────────────────────────────────────────────────
   4. TIPOGRAFIA
   ───────────────────────────────────────────────────────── */
:root {
    /* Stack de fontes */
    --sz-font:           -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Escala — usar apenas estes valores */
    --sz-text-xs:        10px;   /* badges, labels uppercase */
    --sz-text-sm:        11px;   /* rótulos, meta info */
    --sz-text-base:      13px;   /* corpo padrão */
    --sz-text-md:        14px;   /* corpo ênfase, inputs */
    --sz-text-lg:        15px;   /* nav, títulos de item */
    --sz-text-xl:        18px;   /* seção heading */
    --sz-text-2xl:       20px;   /* título de seção */
    --sz-text-3xl:       24px;   /* KPI, valor destaque */
    --sz-text-hero:      36px;   /* saldo, número principal */

    /* Pesos — apenas estes três */
    --sz-weight-normal:  400;
    --sz-weight-medium:  600;
    --sz-weight-bold:    700;
}

/* ─────────────────────────────────────────────────────────
   5. GEOMETRIA — border-radius
   ───────────────────────────────────────────────────────── */
:root {
    --sz-radius-sm:      6px;    /* chips pequenos, paginação, badges */
    --sz-radius-md:      8px;    /* botões, inputs, itens de lista */
    --sz-radius-lg:      12px;   /* cards, boxes, modais */
    --sz-radius-xl:      16px;   /* cards grandes, login card */
    --sz-radius-pill:    999px;  /* chips, tags, avatares circulares */
}

/* ─────────────────────────────────────────────────────────
   6. ESPAÇAMENTO — escala de 4px
   ───────────────────────────────────────────────────────── */
:root {
    --sz-space-1:  4px;
    --sz-space-2:  8px;
    --sz-space-3:  12px;
    --sz-space-4:  16px;
    --sz-space-5:  20px;
    --sz-space-6:  24px;
    --sz-space-8:  32px;
    --sz-space-10: 40px;
}

/* ─────────────────────────────────────────────────────────
   7. SOMBRAS
   ───────────────────────────────────────────────────────── */
:root {
    --sz-shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.06);
    --sz-shadow-md:  0 4px 24px rgba(0, 0, 0, 0.08);
    --sz-shadow-lg:  0 8px 40px rgba(15, 23, 42, 0.10);
    --sz-shadow-brand: var(--sz-brand-shadow);
}

/* ─────────────────────────────────────────────────────────
   8. TRANSIÇÕES
   ───────────────────────────────────────────────────────── */
:root {
    --sz-transition-fast:   all 0.12s ease;
    --sz-transition-base:   all 0.15s ease;
    --sz-transition-slow:   all 0.22s ease;
}

/* ─────────────────────────────────────────────────────────
   9. Z-INDEX
   ───────────────────────────────────────────────────────── */
:root {
    --sz-z-sidebar:  100;
    --sz-z-topbar:   90;
    --sz-z-dropdown: 200;
    --sz-z-modal:    300;
    --sz-z-toast:    400;
}

/* ─────────────────────────────────────────────────────────
   10. DARK MODE — overrides automáticos
   ───────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        --sz-bg:              #0b1220;
        --sz-surface:         #111827;
        --sz-surface-alt:     #0f172a;
        --sz-border:          rgba(255, 255, 255, 0.12);
        --sz-border-light:    rgba(255, 255, 255, 0.08);
        --sz-border-dark:     rgba(255, 255, 255, 0.18);
        --sz-text-primary:    #f8fafc;
        --sz-text-secondary:  #cbd5e1;
        --sz-text-muted:      #94a3b8;
        --sz-text-placeholder:#64748b;
        --sz-divider:         rgba(255, 255, 255, 0.08);
        --sz-divider-alt:     rgba(255, 255, 255, 0.06);
        --sz-brand-light:     rgba(232, 101, 10, 0.15);
        --sz-brand-muted:     rgba(232, 101, 10, 0.10);
        --sz-success-bg:      rgba(29, 111, 66, 0.18);
        --sz-danger-bg:       rgba(192, 57, 43, 0.18);
        --sz-warning-bg:      rgba(133, 100, 4, 0.18);
        --sz-info-bg:         rgba(26, 86, 219, 0.18);
        --sz-shadow-sm:       0 2px 8px rgba(0, 0, 0, 0.25);
        --sz-shadow-md:       0 4px 24px rgba(0, 0, 0, 0.30);
        --sz-shadow-lg:       0 8px 40px rgba(0, 0, 0, 0.40);
    }
}

/* Dark mode explícito via classe (usado pelo Portal) */
.sz-dark {
    --sz-bg:              #0b1220;
    --sz-surface:         #111827;
    --sz-surface-alt:     #0f172a;
    --sz-border:          rgba(255, 255, 255, 0.12);
    --sz-border-light:    rgba(255, 255, 255, 0.08);
    --sz-border-dark:     rgba(255, 255, 255, 0.18);
    --sz-text-primary:    #f8fafc;
    --sz-text-secondary:  #cbd5e1;
    --sz-text-muted:      #94a3b8;
    --sz-text-placeholder:#64748b;
    --sz-divider:         rgba(255, 255, 255, 0.08);
    --sz-divider-alt:     rgba(255, 255, 255, 0.06);
    --sz-brand-light:     rgba(232, 101, 10, 0.15);
    --sz-brand-muted:     rgba(232, 101, 10, 0.10);
    --sz-success-bg:      rgba(29, 111, 66, 0.18);
    --sz-danger-bg:       rgba(192, 57, 43, 0.18);
    --sz-warning-bg:      rgba(133, 100, 4, 0.18);
    --sz-info-bg:         rgba(26, 86, 219, 0.18);
    --sz-shadow-sm:       0 2px 8px rgba(0, 0, 0, 0.25);
    --sz-shadow-md:       0 4px 24px rgba(0, 0, 0, 0.30);
    --sz-shadow-lg:       0 8px 40px rgba(0, 0, 0, 0.40);
}

/* ── CEP Address Lock ─────────────────────────────────────────────────────── */
.senderzz-cep-locked {
    background-color: #f8f9fa !important;
    cursor: not-allowed !important;
    opacity: 0.75 !important;
    border-color: #dee2e6 !important;
    color: #495057 !important;
    pointer-events: none !important;
    user-select: none !important;
}
.senderzz-cep-locked:focus {
    outline: none !important;
    box-shadow: none !important;
}